Mastering Tailwind CSS 4.0: Modern Styling for Production Apps

No more tailwind.config.ts for basic customization. Everything lives in CSS.

Production-Ready Component Patterns

Here are the patterns we use across our Developer Portfolio SaaS Platform and admin dashboard templates:

Card Component with Hover Effects

<div class="group relative overflow-hidden rounded-2xl border border-gray-200 
            bg-white p-6 transition-all duration-300 
            hover:border-indigo-200 hover:shadow-xl hover:shadow-indigo-100/50">
  <div class="absolute inset-0 bg-gradient-to-br from-indigo-50/50 to-transparent 
              opacity-0 transition-opacity group-hover:opacity-100" />
  <div class="relative z-10">
    <h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
    <p class="mt-2 text-sm text-gray-600">Card description goes here.</p>
  </div>
</div>

Glassmorphism Effect

Used in our AgencyPro Elite Template ($49):

<div class="rounded-2xl border border-white/20 bg-white/10 
            p-8 shadow-2xl backdrop-blur-xl">
  <h2 class="text-2xl font-bold text-white">Glassmorphism Panel</h2>
  <p class="mt-2 text-white/80">Beautiful frosted glass effect.</p>
</div>

Gradient Text

<h1 class="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 
           bg-clip-text text-5xl font-extrabold text-transparent">
  Build Something Amazing
</h1>

Container Queries: The New Responsive

Container queries let components respond to their parent's size, not the viewport:

<div class="@container">
  <div class="grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3 gap-4">
    <div class="rounded-lg bg-white p-4 shadow">
      <h3 class="text-sm @sm:text-base @lg:text-lg font-semibold">
        Responsive to container!
      </h3>
    </div>
  </div>
</div>

This is a game-changer for component libraries and reusable layouts.

Animations Without JavaScript

Tailwind 4.0 makes CSS animations trivial:

<!-- Pulse animation for loading states -->
<div class="animate-pulse rounded-xl bg-gray-200 h-48" />

<!-- Custom keyframe animation -->
<style>
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
</style>
<div class="animate-[float_3s_ease-in-out_infinite]">
  Floating element
</div>

<!-- Staggered entrance animations -->
<div class="opacity-0 animate-[fadeIn_0.5s_ease-out_forwards]" 
     style="animation-delay: 0ms">Item 1</div>
<div class="opacity-0 animate-[fadeIn_0.5s_ease-out_forwards]" 
     style="animation-delay: 100ms">Item 2</div>
<div class="opacity-0 animate-[fadeIn_0.5s_ease-out_forwards]" 
     style="animation-delay: 200ms">Item 3</div>

Check out our CSS Animation Techniques post for more advanced patterns.

Responsive Design Patterns

<!-- Mobile-first responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
  <!-- Cards -->
</div>

<!-- Responsive typography -->
<h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl 
           font-bold leading-tight">
  Responsive Heading
</h1>

<!-- Responsive spacing -->
<section class="px-4 sm:px-6 lg:px-8 py-12 sm:py-16 lg:py-24">
  <!-- Content -->
</section>

Design pattern details in our Responsive Design Patterns guide.

Light-Mode Only Design Philosophy

At Hardik Kanajariya's studio, we follow a "Magical Minimalism" design philosophy — light-mode only, no dark: classes:

<!-- ✅ Our approach: clean, professional light theme -->
<div class="bg-white text-gray-900 border-gray-200">
  <h2 class="text-gray-900">Clean and Professional</h2>
  <p class="text-gray-600">Focused on readability and elegance.</p>
</div>

<!-- ❌ We avoid: dark mode complexity -->
<!-- No dark:bg-gray-900 dark:text-white etc. -->

This philosophy runs through all our products — from the SaaS platform to our ZenithUI Light Admin Dashboard ($39) and Landing Pages Collection ($79).

Tailwind with Shadcn/UI

The perfect pairing for component-based development:

import { Button } from "@ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@ui/card";

export function PricingCard({ plan, price }: PricingCardProps) {
  return (
    <Card className="relative overflow-hidden border-indigo-200">
      <CardHeader className="bg-gradient-to-br from-indigo-50 to-white">
        <CardTitle className="text-xl">{plan}</CardTitle>
      </CardHeader>
      <CardContent className="p-6">
        <p className="text-4xl font-bold text-gray-900">${price}</p>
        <Button className="mt-6 w-full">Get Started</Button>
      </CardContent>
    </Card>
  );
}

Performance Tips

1. Purge unused styles — Tailwind 4.0 does this automatically
2. Use CSS variables for theme values — reduces class count
3. Avoid deeply nested utility classes — extract components
4. Use @apply sparingly — prefer component composition
5. Leverage @layer — organize custom CSS properly

What's Next

Master these patterns and you'll build beautiful, performant UIs in record time. Explore our templates for real-world implementations:

• AgencyPro Elite ($49) — creative agency template
• Landing Pages Collection ($79) — 30+ ready-made landing pages
• ZenithUI Light ($39) — clean admin dashboard

Related articles:

• Next.js 16 Complete Guide — the framework powering our styles
• CSS Animation Techniques — advanced animations
• Responsive Design Patterns — layout mastery

Follow Hardik Kanajariya on Pinterest for UI/UX inspiration.

Want beautiful, production-ready styles out of the box? Our Developer Portfolio & SaaS Platform uses Tailwind CSS 4.0 + Shadcn/UI throughout — starting at $299.