Tailwind CSS

🎨 Design Mastery

Tailwind CSS Best Practices

Optimize your development workflow using utility-first class composition and configuration patterns.

Start Learning

Utility-First Philosophy

Maximize productivity with Tailwind's atomic classes while maintaining maintainable, consistent styling.

Mobile First

Start with your smallest screen size, then scale up with responsive modifiers. 

<div class="bg-blue-500 text-white p-4 rounded-md 
                md:bg-green-500 
                lg:text-xl" 
     href="/#">Responsive Component</code>

Responsive Design

Use breakpoints like sm, md, lg, xl to target different screen sizes effectively. 

<div class="hidden sm:flex" 
            sm:block 
            lg:hidden">Responsive</code>

Customization

Extend or override default settings in your tailwind.config.js file. 

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0070f3'
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif']
      }
    }
  }
}

Advanced Optimization

Improve build times and reduce CSS size using these expert strategies for production-grade projects.

JIT Compiler

Enable Just-In-Time compiler for significantly faster rebuilds during development. 

/** @type {import('tailwindcss').Config} */
module.exports = {
  mode: 'jit',
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {}
}

Purge Unused

Configure content paths to remove unused classes from production builds. 

purge: {
  content: ['src/**/*.tsx', 'public/index.html'],
  options: {
    whitelistPatterns: [/^data-/]
  }
}

Custom Variants

Create conditional styles for complex UI state combinations using custom variants. 

variants: [
  ['group-hover', 'hover']
]

Reusable Card Component

Demonstration of a reusable base card component with customizable variants 

<div class="bg-white border border-gray-200 
      rounded-xl p-6 
      shadow-sm hover:shadow-md 
      transition-shadow 
      dark:bg-gray-900 dark:border-gray-800"
      aria-labelledby="card-title">
  <div class="flex justify-between">
    <h3 id="card-title" class="text-lg font-semibold">...</h3>
    <span class="text-sm text-gray-500">...</span>
  </div>
  <p class="mt-2 text-gray-600">...</p>
</div>

Tailwind Config Optimization

Balance customization and maintainability by organizing your configuration effectively.

Theme Extensions

Add custom colors, fonts, or spacing values to extend the default theme. 

extend: {
  spacing: {
    '128': '32rem'
  },
  zIndex: {
    '100': '100'
  }
}

Plugin Management

Organize plugins logically and minimize dependency bloat. 

plugins: [
  require('@tailwindcss/typography'),
  require('@tailwindcss/forms'),
  function({ addVariant }) {
    addVariant('children', '> *');
  }
]

Presets

Keep configuration modular by splitting into multiple preset files. 

require('./tailwind-presets/core'),
require('./tailwind-presets/forms')