Loading

Tailwind CSS Tips and Tricks

·1 min read
csstailwindtips

Useful Patterns

Here are some Tailwind CSS patterns I use all the time.

Gradient Text

<h1 class="bg-gradient-to-r from-indigo-500 to-cyan-400 bg-clip-text text-transparent">
  Gradient Heading
</h1>

Glass Effect

<div class="backdrop-blur-md bg-white/10 border border-white/20 rounded-xl">
  Glass card
</div>

Responsive Grid

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- cards -->
</div>

Custom Utilities

I like to define custom utilities in my CSS:

@utility glow {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}

Conclusion

Tailwind CSS is incredibly powerful once you learn its utility-first approach. These patterns have saved me countless hours of writing custom CSS.