Tailwind config with brand color

A minimal tailwind config with custom font and brand color support.

Tailwind config with brand color

This is the base config I use for tailwindcss projects. We use custom font 'Inter' which is a really nice looking font.

We will also configure a brand color to be used across our project. So to change accent color it's just matter of changing a single variable.

const defaultTheme = require('tailwindcss/defaultTheme') const colors = require('tailwindcss/colors') const brandColor = colors.pink /** * @type {import('tailwindcss/tailwind-config').TailwindConfig } **/ module.exports = { darkMode: 'class', content: ['./src/**/*.{js,ts,jsx,tsx}'], theme: { extend: { fontFamily: { sans: ['Inter', ...defaultTheme.fontFamily.sans], }, colors: { gray: colors.trueGray, brand: brandColor, }, ringColor: { DEFAULT: brandColor['500'], }, }, }, plugins: [ require('@tailwindcss/aspect-ratio'), require('@tailwindcss/forms'), require('@tailwindcss/typography'), ], }

Notice how we also included a JSDoc comment that will provide autocomplete for us.

@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap'); @tailwind base; @tailwind components; body { @apply text-gray-900 bg-gray-100 dark:text-gray-100 dark:bg-gray-900 antialiased font-sans; font-feature-settings: 'cv11', 'cv04'; } form { margin-block-end: 0; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: black !important; -webkit-box-shadow: 0 0 0 999px theme('colors.white') inset !important; background-clip: content-box !important; } .dark input:-webkit-autofill, .dark input:-webkit-autofill:hover, .dark input:-webkit-autofill:focus, .dark input:-webkit-autofill:active { -webkit-text-fill-color: white !important; -webkit-box-shadow: 0 0 0 999px theme('colors.gray.800') inset !important; background-clip: content-box !important; } @tailwind utilities;

We also get rid of background color of inputs when they are autofilled by chromium/webkit browsers