Mastering Tailwind CSS: Advanced Techniques and Custom Plugins

Advanced Tailwind CSS Techniques

Take your Tailwind skills beyond the basics with custom configurations and plugins.

Custom Configuration

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        },
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      },
    },
  },
}

Creating Custom Plugins

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function({ addUtilities, theme }) {
      addUtilities({
        '.text-shadow': {
          textShadow: '2px 2px 4px rgba(0,0,0,0.1)',
        },
        '.text-shadow-lg': {
          textShadow: '4px 4px 8px rgba(0,0,0,0.2)',
        },
      })
    }),
  ],
}

Component Patterns with @apply

/* styles/components.css */
@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-brand-500 text-white rounded-lg
           hover:bg-brand-600 transition-colors;
  }

  .card {
    @apply bg-white rounded-xl shadow-lg p-6;
  }
}

Responsive Design Patterns

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="col-span-1 lg:col-span-2">Featured</div>
</div>

Master these techniques to build scalable design systems with Tailwind CSS.