nonobieBETA
GitHub
HomeCSS Tailwind
Chapter 10

10 — Tailwind Configuration

Basic Configuration

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Content Paths

module.exports = {
  content: [
    // Pages
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    
    // Components
    "./components/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
    
    // Templates
    "./app/**/*.{js,ts,jsx,tsx}",
    "./src/app/**/*.{js,ts,jsx,tsx}",
    
    // Non-JS files
    "./src/**/*.html",
  ],
}

Important: Paths must match where Tailwind classes are used.

Theme Customization

Extending Colors

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          900: '#1e3a8a',
        },
        accent: '#ff6b6b',
      }
    }
  }
}

Usage: bg-brand-500, text-accent

Adding Colors (Replace)

module.exports = {
  theme: {
    colors: {
      primary: '#3b82f6',
      secondary: '#8b5cf6',
    }
    // Removes all default colors!
  }
}

Spacing

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}

Usage: m-128, p-144

Typography

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        display: ['Poppins', 'sans-serif'],
      },
      fontSize: {
        'xs': ['.75rem', { lineHeight: '1rem' }],
        '5xl': ['3rem', { lineHeight: '1' }],
        '6xl': ['3.75rem', { lineHeight: '1' }],
      },
    }
  }
}

Usage: font-sans, text-5xl, leading-tight

Border Radius

module.exports = {
  theme: {
    extend: {
      borderRadius: {
        'xl': '1rem',
        '2xl': '2rem',
        '3xl': '3rem',
        'full': '9999px',
      }
    }
  }
}

Usage: rounded-xl, rounded-full

Box Shadow

module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'custom': '0 10px 25px -5px rgba(0, 0, 0, 0.1)',
        'glow': '0 0 20px rgba(59, 130, 246, 0.5)',
      }
    }
  }
}

Usage: shadow-custom, shadow-glow

Animation

module.exports = {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'spin-slow': 'spin 3s linear infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      }
    }
  }
}

Usage: animate-fade-in, animate-spin-slow

Plugins

Typography

npm install @tailwindcss/typography
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
 
module.exports = {
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Usage:

<article class="prose">
  <h1>Article Title</h1>
  <p>Beautiful typography out of the box.</p>
</article>
 
<article class="prose prose-lg">
  <!-- Larger text -->
</article>

Forms

npm install @tailwindcss/forms
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

Usage: Consistent form styling across browsers

<input class="form-input">  <!-- Styled input -->
<select class="form-select"> <!-- Styled select -->

Aspect Ratio

npm install @tailwindcss/aspect-ratio
module.exports = {
  plugins: [
    require('@tailwindcss/aspect-ratio'),
  ],
}

Usage:

<div class="aspect-video">16:9</div>
<div class="aspect-square">1:1</div>
<div class="aspect-[4/3]">4:3</div>

Line Clamp

npm install @tailwindcss/line-clamp
module.exports = {
  plugins: [
    require('@tailwindcss/line-clamp'),
  ],
}

Usage:

<p class="line-clamp-3">
  Long text truncated to 3 lines...
</p>

Container Queries

npm install @tailwindcss/container-queries
module.exports = {
  plugins: [
    require('@tailwindcss/container-queries'),
  ],
}

Usage:

<div class="@container">
  <div class="@lg:text-xl">
    Text scales with container
  </div>
</div>

Custom Plugin

module.exports = {
  plugins: [
    plugin(function({ addUtilities, theme }) {
      const newUtilities = {
        '.content-auto': {
          'content-visibility': 'auto',
        },
        '.scrollbar-hide': {
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
          '&::-webkit-scrollbar': {
            display: 'none',
          },
        },
      }
      addUtilities(newUtilities, ['responsive', 'hover'])
    }),
  ],
}

Dark Mode Configuration

module.exports = {
  darkMode: 'class',  // or 'media'
  // ...
}

Conditional Dark Mode

module.exports = {
  darkMode: ['class', '[data-theme="dark"]'],
}

Usage: Works with class="dark" or data-theme="dark"

Prefix

module.exports = {
  prefix: 'tw-',
}

Usage: tw-bg-blue-500, tw-text-white

Use case: Avoid conflicts with other CSS frameworks

Important Mode

module.exports = {
  important: true,
  // or
  important: '#app',
}

Use case: Override existing CSS without !important

Safelist

module.exports = {
  safelist: [
    'bg-red-500',
    'text-center',
    { pattern: /bg-(red|green|blue)-(100|200|300)/ },
    {
      pattern: /bg-(.*)/,
      variants: ['lg', 'hover', 'focus', 'lg:hover'],
    },
  ],
}

Use case: Classes added dynamically (e.g., via CMS)

Presets

// my-preset.js
module.exports = {
  theme: {
    colors: {
      brand: {
        500: '#3b82f6',
      }
    }
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}
// tailwind.config.js
const myPreset = require('./my-preset.js')
 
module.exports = {
  presets: [myPreset],
  // Can override preset values
  theme: {
    extend: {
      colors: {
        brand: {
          600: '#2563eb',
        }
      }
    }
  }
}

Environment Variables

module.exports = {
  content: {
    files: ['./src/**/*.{html,js}'],
  },
  prefix: process.env.TAILWIND_PREFIX || '',
}

Multiple Configs

// tailwind.config.dev.js
module.exports = {
  content: ['./src/**/*.{html,js}'],
  // Development settings
}
 
// tailwind.config.prod.js
module.exports = {
  content: ['./dist/**/*.{html,js}'],
  // Production settings
}
# Use specific config
npx tailwindcss -c tailwind.config.dev.js -i ./src/input.css -o ./dist/output.css

Key Takeaways

  • content: Must include all files using Tailwind classes
  • extend: Add to defaults; omit to replace
  • Plugins: Typography, forms, aspect-ratio, line-clamp add powerful features
  • Custom plugin: Create utilities for project-specific needs
  • Safelist: Preserve classes used dynamically
  • Prefix: Avoid conflicts (tw-)
  • Presets: Share configuration across projects
Previous09 — Performance OptimizationNext 11 — CSS Architecture