# 10 Tailwind CSS Tips for Better Productivity

> Boost your Tailwind CSS workflow with these practical tips and tricks that will help you write cleaner, more maintainable styles.

- **URL:** https://www.arjunbharti.com/blog/tailwind-css-tips
- **Date:** 2026-01-15
- **Category:** tips
- **Tags:** tailwind-css, css, web-development, tips

---

Tailwind CSS has revolutionized how we write styles. Here are 10 tips to help you get the most out of it.

 

## 1. Use the @apply Directive Sparingly

While `@apply` is useful, overusing it defeats the purpose of utility-first CSS:

```css
/* Good - for commonly repeated patterns */
.btn-primary {
  @apply px-4 py-2 bg-blue-500 text-white rounded-lg;
}

/* Better - just use utilities in HTML */
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
```

&nbsp;

## 2. Leverage Group Hover

The `group` utility is incredibly powerful for parent-child hover states:

```html
<div class="group p-4 hover:bg-gray-100">
  <h3 class="group-hover:text-blue-500">Title</h3>
  <p class="group-hover:text-gray-700">Description</p>
</div>
```

&nbsp;

## 3. Use Arbitrary Values

When you need a specific value that's not in the default scale:

```html
<div class="w-[137px] h-[42px] bg-[#1a1a1a]">
  Custom dimensions and colors
</div>
```

&nbsp;

## 4. Create Custom Animations

Extend the default animations in your config:

```javascript
module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
        'bounce-gentle': 'bounce 2s ease-in-out infinite',
      }
    }
  }
}
```

&nbsp;

## 5. Use the Space Utilities

Instead of adding margin to each child, use space utilities on the parent:

```html
<!-- Instead of this -->
<div>
  <div class="mb-4">Item 1</div>
  <div class="mb-4">Item 2</div>
  <div>Item 3</div>
</div>

<!-- Do this -->
<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

&nbsp;

## 6. Master the Divide Utilities

Add borders between children elements without extra markup:

```html
<ul class="divide-y divide-gray-200">
  <li class="py-4">First item</li>
  <li class="py-4">Second item</li>
  <li class="py-4">Third item</li>
</ul>
```

&nbsp;

## 7. Use Peer for Sibling States

Style elements based on sibling state with the `peer` utility:

```html
<input type="checkbox" class="peer" />
<label class="peer-checked:text-blue-500 peer-checked:font-bold">
  This label changes when checkbox is checked
</label>
```

&nbsp;

## 8. Leverage Container Queries

Use container queries for component-level responsive design:

```html
<div class="@container">
  <div class="@lg:flex @lg:items-center">
    <!-- Responds to container width, not viewport -->
  </div>
</div>
```

&nbsp;

## 9. Use the Ring Utilities for Focus States

Create beautiful focus states without affecting layout:

```html
<button class="focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
  Accessible Button
</button>
```

&nbsp;

## 10. Organize with Prettier Plugin

Keep your classes organized automatically with the official Prettier plugin:

```bash
npm install -D prettier-plugin-tailwindcss
```

This sorts your classes in a consistent order, making code reviews easier and reducing merge conflicts.

&nbsp;

## Conclusion

These tips will help you write more efficient Tailwind CSS and improve your development workflow. The key is to embrace the utility-first approach while knowing when to extract components for better maintainability.