Customization & Theming

Tailwind is designed to be customized. Make it match your brand perfectly.

The Config File

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {
      // Your customizations here
    },
  },
  plugins: [],
}

Adding Custom Colors

Add your brand colors:

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        // Single color
        'brand': '#0d9488',

        // Color with shades
        'brand': {
          50: '#f0fdfa',
          100: '#ccfbf1',
          200: '#99f6e4',
          300: '#5eead4',
          400: '#2dd4bf',
          500: '#14b8a6',
          600: '#0d9488',
          700: '#0f766e',
          800: '#115e59',
          900: '#134e4a',
        },

        // Using CSS variables
        'primary': 'var(--color-primary)',
      },
    },
  },
}

Now use them like any other color:

<button class="bg-brand hover:bg-brand-600 text-white">
  Brand Button
</button>

<div class="bg-brand-50 border border-brand-200 text-brand-800 p-4 rounded">
  Brand alert
</div>

Custom Fonts

Add your own fonts:

// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Inter', 'system-ui', 'sans-serif'],
        'display': ['Cal Sans', 'Inter', 'sans-serif'],
        'mono': ['JetBrains Mono', 'monospace'],
      },
    },
  },
}

Use them:

<h1 class="font-display text-4xl">Display Heading</h1>
<p class="font-sans">Body text with Inter</p>
<code class="font-mono">console.log('code')</code>

Custom Spacing

Extend the spacing scale:

// tailwind.config.js
export default {
  theme: {
    extend: {
      spacing: {
        '18': '4.5rem',    // 72px
        '88': '22rem',     // 352px
        '128': '32rem',    // 512px
      },
    },
  },
}

<div class="p-18">Custom padding</div>
<div class="w-128">Custom width</div>

Custom Breakpoints

Define your own screen sizes:

// tailwind.config.js
export default {
  theme: {
    extend: {
      screens: {
        'xs': '475px',
        '3xl': '1920px',
      },
    },
  },
}

<div class="hidden xs:block">Shows at 475px+</div>
<div class="3xl:text-2xl">Larger text on big screens</div>

Custom Shadows

Create branded shadows:

// tailwind.config.js
export default {
  theme: {
    extend: {
      boxShadow: {
        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07)',
        'glow': '0 0 15px rgba(59, 130, 246, 0.5)',
        'brutal': '4px 4px 0 0 #000',
      },
    },
  },
}

<div class="shadow-soft">Soft shadow</div>
<div class="shadow-glow">Glowing shadow</div>
<div class="shadow-brutal border-2 border-black">Brutal design</div>

Custom Animations

Add your own animations:

// tailwind.config.js
export default {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'bounce-slow': 'bounce 2s infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
      },
    },
  },
}

<div class="animate-fade-in">Fades in</div>
<div class="animate-slide-up">Slides up</div>

Using CSS Variables

For dynamic theming (like dark mode):

/* In your CSS */
:root {
  --color-primary: #3b82f6;
  --color-background: #ffffff;
}

.dark {
  --color-primary: #60a5fa;
  --color-background: #1f2937;
}

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        background: 'var(--color-background)',
      },
    },
  },
}

Practical Example: Brand Theme

Complete brand customization:

// tailwind.config.js
export default {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
        secondary: {
          500: '#8b5cf6',
          600: '#7c3aed',
        },
        success: '#10b981',
        warning: '#f59e0b',
        danger: '#ef4444',
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        heading: ['Poppins', 'sans-serif'],
      },
      borderRadius: {
        'xl': '1rem',
        '2xl': '1.5rem',
      },
      boxShadow: {
        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
      },
    },
  },
  plugins: [],
}

Using your theme:

<div class="bg-primary-50 p-8">
  <h1 class="font-heading text-3xl font-bold text-primary-700">
    Welcome to Our App
  </h1>
  <p class="mt-4 text-gray-600">
    Built with a custom Tailwind theme.
  </p>
  <div class="mt-6 flex gap-4">
    <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-2 rounded-xl shadow-card">
      Primary
    </button>
    <button class="bg-secondary-500 hover:bg-secondary-600 text-white px-6 py-2 rounded-xl shadow-card">
      Secondary
    </button>
  </div>
</div>

Plugins

Extend Tailwind with plugins:

// tailwind.config.js
export default {
  plugins: [
    require('@tailwindcss/forms'),        // Better form styles
    require('@tailwindcss/typography'),   // Prose styling
    require('@tailwindcss/aspect-ratio'), // Aspect ratio utilities
  ],
}

Key Takeaways

• tailwind.config.js: Central customization hub
• theme.extend: Add to defaults without replacing
• Custom colors: Define brand colors with shades
• Custom fonts: Add your typography
• CSS variables: Enable dynamic theming
• Plugins: Extend functionality

You've completed Tailwind Fundamentals! Time for the quiz!