Tailwind CSS Tips

January 25, 2024 • 6 min read
dev

Tailwind CSS is a utility-first CSS framework that helps you build modern designs without leaving your HTML.

Use Arbitrary Values

Tailwind 3+ supports arbitrary values with square brackets:

<div class="w-[300px] bg-[#1a1a1a] text-[14px]">Custom styling</div>

Create Reusable Component Classes

Use @apply to create reusable component classes:

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

Responsive Design

Tailwind makes responsive design simple with prefixes:

<div class="w-full md:w-1/2 lg:w-1/3">Responsive width</div>

Dark Mode

Enable dark mode in your config and use dark: prefix:

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">Dark mode ready</div>

Pro Tips