Tailwind CSS Deep Dive

Core Concepts

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">
        Case study
      </div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
        Creating responsive layouts
      </a>
    </div>
  </div>
</div>

Configuration

Customize `tailwind.config.js`:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      }
    }
  }
}

Performance Tips

• Purge unused CSS in production
• Use JIT mode for faster builds
• Prefer responsive variants