Configuration & Theme Customization

Customize Tailwind to fit your brand identity by extending default colors, fonts, spacing scales, breakpoints, and adding official plugins.

Anatomy of `tailwind.config.js`

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 1. Specify content files for Purge CSS / JIT engine
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],

  // 2. Dark Mode Strategy ('class' or 'media')
  darkMode: 'class',

  // 3. Theme Customization
  theme: {
    // Override defaults completely
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
    },
    
    // Extend defaults (Keeps standard Tailwind colors/spacing intact!)
    extend: {
      colors: {
        brand: {
          light: '#38bdf8',
          DEFAULT: '#0284c7',
          dark: '#0369a1',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        heading: ['Outfit', 'sans-serif'],
      },
      spacing: {
        '128': '32rem', // Enables w-128 or p-128
      },
    },
  },

  // 4. Official & Custom Plugins
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

Using Extended Brand Colors

Once defined in theme.extend.colors, your custom brand colors automatically generate matching utility classes:

• bg-brand or bg-brand-dark
• text-brand-light
• border-brand

Installing Official Plugins

# Install official plugins via npm
npm install -D @tailwindcss/forms @tailwindcss/typography @tailwindcss/aspect-ratio