10 Tailwind CSS Tips That Will Change Your Workflow

5. The size Utility

Shorthand for width and height:

<!-- Before -->
<div class="w-10 h-10"></div>

<!-- After -->
<div class="size-10"></div>

6. Truncate with Line Clamp

Multi-line text truncation:

<!-- Single line -->
<p class="truncate">Very long text...</p>

<!-- Multiple lines -->
<p class="line-clamp-3">
  This text will be truncated after three lines with an ellipsis...
</p>

7. Smart Spacing with Space Utilities

Consistent spacing between children:

<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

<!-- With dividers -->
<div class="divide-y divide-gray-200">
  <div class="py-4">Section 1</div>
  <div class="py-4">Section 2</div>
</div>

8. Gradient Text

Beautiful gradient text effects:

<h1 class="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 
           bg-clip-text text-transparent">
  Gradient Heading
</h1>

9. Focus Visible for Accessibility

Better focus states for keyboard navigation:

<!-- Only shows focus ring on keyboard navigation -->
<button class="focus-visible:ring-2 focus-visible:ring-blue-500 
               focus-visible:outline-none">
  Click me
</button>

10. Custom Animation with @keyframes

Create unique animations:

// tailwind.config.ts
theme: {
  extend: {
    animation: {
      "fade-in": "fadeIn 0.5s ease-out",
      "slide-up": "slideUp 0.3s ease-out",
    },
    keyframes: {
      fadeIn: {
        "0%": { opacity: "0" },
        "100%": { opacity: "1" },
      },
      slideUp: {
        "0%": { transform: "translateY(20px)", opacity: "0" },
        "100%": { transform: "translateY(0)", opacity: "1" },
      },
    },
  },
},

<div class="animate-fade-in">Fades in</div>
<div class="animate-slide-up">Slides up</div>

Bonus: Component Patterns

Here's a reusable card pattern:

<div class="rounded-lg border bg-card p-6 shadow-sm 
            transition-shadow hover:shadow-md">
  <h3 class="text-lg font-semibold">Card Title</h3>
  <p class="mt-2 text-muted-foreground">
    Card description with helpful information.
  </p>
  <div class="mt-4 flex gap-2">
    <button class="rounded bg-primary px-4 py-2 text-sm 
                   text-primary-foreground hover:bg-primary/90">
      Action
    </button>
  </div>
</div>

Conclusion

Tailwind CSS is incredibly powerful once you learn its patterns. These tips should help you write cleaner, more maintainable styles while keeping your productivity high.

What's your favorite Tailwind tip? Share it in the comments!