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.

js
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.

css
@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