Advanced

Customization

Extend and customize Tailwind through tailwind.config.js and the @apply directive.

tailwind.config.js

Customize Tailwind's default theme by extending or overriding values. Add custom colors, spacing, fonts, and more.

The @apply Directive

Use @apply in CSS files to extract repeated utility patterns into component classes. Great for elements used many times across the codebase.

Plugins

Tailwind has an official plugin ecosystem (@tailwindcss/typography, @tailwindcss/forms, etc.) and a community plugin ecosystem.

Example

javascript
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue}'],
  theme: {
    extend: {
      // Add custom colors
      colors: {
        brand: {
          50:  '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
          900: '#1e3a5f',
        },
      },
      // Add custom fonts
      fontFamily: {
        display: ['Inter', 'sans-serif'],
        body: ['Merriweather', 'serif'],
      },
      // Add custom spacing
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      // Add custom border radius
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
};

/* Using @apply in CSS */
/* src/styles.css */
@layer components {
  .btn {
    @apply inline-flex items-center justify-center
           px-4 py-2 rounded font-medium
           transition-colors duration-200
           focus:outline-none focus:ring-2;
  }

  .btn-primary {
    @apply bg-blue-500 text-white
           hover:bg-blue-600
           focus:ring-blue-400;
  }

  .btn-secondary {
    @apply bg-gray-100 text-gray-800
           hover:bg-gray-200
           focus:ring-gray-300;
  }

  .card {
    @apply bg-white rounded-lg shadow-sm border border-gray-100 p-6;
  }
}
Try it yourself — JAVASCRIPT