tailwind.config.js

Definition

The central configuration file where you define your project's custom design system (colors, fonts, breakpoints) and tell Tailwind which files to scan for classes.

Explain Like I'm New

Tailwind's brain. If your company brand color is 'Spotify Green' (#1DB954), you don't type `bg-[#1DB954]` everywhere. You open `tailwind.config.js`, add a color called `spotify`, and now you can type `bg-spotify` anywhere in your app.

Real World Example

Adding a custom font family like 'Inter' or overriding the default `sm`, `md`, and `lg` responsive breakpoints to match a specific UI design.

Common Use Cases

•Design system enforcement
•Theming

Interactive Example

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 1. Tell Tailwind where to look for class names
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  // 2. Customize your design system
  theme: {
    extend: {
      colors: {
        brand: {
          light: '#3fbaeb',
          DEFAULT: '#0fa9e6', // Use via 'bg-brand'
          dark: '#0c87b8',
        }
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'], // Overrides the default sans font
      }
    },
  },
  plugins: [],
}

Interview Questions

basic

What is the name of the file used to customize Tailwind?

intermediate

What is the difference between `theme.extend.colors` and `theme.colors` in the config?

Flash Cards

Question

Config file name?

Click to reveal answer

Answer

`tailwind.config.js` (or `.ts`)

Question

extend vs override?

Click to reveal answer

Answer

If you put your colors inside `theme.colors`, you OVERWRITE Tailwind's entire default color palette (you lose `bg-blue-500`). If you put them inside `theme.extend.colors`, you KEEP the defaults and ADD your custom colors alongside them.