Tailwind CSS: Advanced Techniques for Modern Web Design

Tailwind CSS has revolutionized how we write CSS. Let's explore advanced techniques to get the most out of it.

Configuration

Extended Theme

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      boxShadow: {
        'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07)',
      },
    },
  },
};

Custom Utilities

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  plugins: [
    plugin(function ({ addUtilities, addComponents, e, config }) {
      // Add new utilities
      addUtilities({
        '.text-shadow': {
          'text-shadow': '2px 2px 4px rgba(0, 0, 0, 0.1)',
        },
        '.text-shadow-lg': {
          'text-shadow': '4px 4px 8px rgba(0, 0, 0, 0.15)',
        },
      });
      
      // Add components
      addComponents({
        '.btn': {
          padding: '.5rem 1rem',
          borderRadius: '.25rem',
          fontWeight: '600',
        },
      });
    }),
  ],
};

Responsive Design

Breakpoints

<!-- Mobile first approach -->
<div class="text-sm md:text-base lg:text-lg">
  Responsive text
</div>

<!-- Custom breakpoints -->
<!-- tailwind.config.js -->
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1280px',
      '2xl': '1536px',
    },
  },
};

Container Queries

<div class="@container">
  <div class="@lg:flex">
    <!-- Changes at container breakpoint -->
  </div>
</div>

Dark Mode

Configuration

// tailwind.config.js
module.exports = {
  darkMode: 'class', // or 'media'
};

Usage

<div class="bg-white dark:bg-gray-900">
  <p class="text-gray-900 dark:text-white">
    Content adapts to dark mode
  </p>
</div>

Toggle Implementation

function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);
  
  useEffect(() => {
    if (isDark) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDark]);
  
  return (
    <button onClick={() => setIsDark(!isDark)}>
      Toggle Theme
    </button>
  );
}

Component Patterns

Button Variants

<!-- Base button -->
<button class="btn">
  Default Button
</button>

<!-- Variants -->
<button class="btn bg-blue-500 hover:bg-blue-600 text-white">
  Primary
</button>

<button class="btn bg-gray-200 hover:bg-gray-300 text-gray-800">
  Secondary
</button>

<button class="btn border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white">
  Outline
</button>

Card Component

<div class="bg-white rounded-xl shadow-soft overflow-hidden hover:shadow-lg transition-shadow">
  <img src="image.jpg" class="w-full h-48 object-cover" />
  <div class="p-6">
    <h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
    <p class="mt-2 text-gray-600">Card description goes here.</p>
    <button class="mt-4 btn bg-brand-500 text-white hover:bg-brand-600">
      Learn More
    </button>
  </div>
</div>

Form Inputs

<div class="space-y-4">
  <div>
    <label class="block text-sm font-medium text-gray-700">
      Email
    </label>
    <input
      type="email"
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500"
      placeholder="you@example.com"
    />
  </div>
  
  <div>
    <label class="block text-sm font-medium text-gray-700">
      Message
    </label>
    <textarea
      rows="4"
      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-brand-500 focus:ring-brand-500"
    ></textarea>
  </div>
</div>

Animations

Custom Animations

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'bounce-in': 'bounceIn 0.5s',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        bounceIn: {
          '0%': { transform: 'scale(0.9)', opacity: '0' },
          '50%': { transform: 'scale(1.05)' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
      },
    },
  },
};

Usage

<div class="animate-fade-in">
  Fades in on mount
</div>

<div class="animate-slide-up">
  Slides up on mount
</div>

Grid and Flexbox

Complex Grid Layout

<div class="grid grid-cols-12 gap-4">
  <aside class="col-span-12 md:col-span-3 lg:col-span-2">
    Sidebar
  </aside>
  
  <main class="col-span-12 md:col-span-9 lg:col-span-8">
    Main content
  </main>
  
  <aside class="col-span-12 lg:col-span-2">
    Right sidebar
  </aside>
</div>

Masonry Grid

<div class="columns-1 md:columns-2 lg:columns-3 gap-4">
  <div class="break-inside-avoid mb-4">Item 1</div>
  <div class="break-inside-avoid mb-4">Item 2</div>
  <div class="break-inside-avoid mb-4">Item 3</div>
</div>

@apply Directive

Extracting Components

/* components.css */
@tailwind components;

.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors;
}

.card {
  @apply bg-white rounded-xl shadow-md overflow-hidden;
}

.card-body {
  @apply p-6;
}

.card-title {
  @apply text-lg font-semibold text-gray-900;
}

When to Use @apply

• Use for truly reusable components
• Avoid for one-off styles
• Prefer inline classes for readability
• Use for base styles in CSS files

Performance Tips

PurgeCSS Configuration

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,ts,jsx,tsx}',
    './pages/**/*.{html,js,ts,jsx,tsx}',
    './components/**/*.{html,js,ts,jsx,tsx}',
  ],
};

JIT Mode

// tailwind.config.js
module.exports = {
  mode: 'jit',
  content: ['./src/**/*.html'],
};

Arbitrary Values

<!-- Any value on the fly -->
<div class="w-[137px] h-[42px] bg-[#1da1f2]">
  Custom dimensions and colors
</div>

<!-- With variants -->
<div class="hover:bg-[#ff0000]/50">
  Hover with custom color
</div>

Best Practices

1. Keep utility classes in templates for visibility
2. Extract components for repeated patterns
3. Use @apply sparingly
4. Configure design tokens in theme
5. Use arbitrary values for exceptions
6. Leverage IntelliSense for productivity

Conclusion

Tailwind CSS provides a powerful, utility-first approach to styling. By mastering configuration, responsive design, and component patterns, you can build beautiful, maintainable UIs efficiently.