3 UnoCSS Tips You Might Not Know

February 23, 2026
Tips & tricks > CSS
unocss AI-generated

3 UnoCSS Tips You Might Not Know

UnoCSS is a powerful, instant on-demand atomic CSS engine that many developers overlook some of its best features. Here are three tips that can level up your styling game.

1. Arbitrary Value Syntax for Custom Values

Most people know about predefined spacing and colors in UnoCSS, but not everyone realizes you can use arbitrary values for almost anything using square brackets.

<!-- Instead of limiting yourself to predefined sizes -->
<div class="w-96">This is 384px</div>

<!-- Use arbitrary values for exact control -->
<div class="w-[450px]">This is exactly 450px</div>
<div class="h-[15vh]">15% of viewport height</div>
<div class="gap-[3.5rem]">Custom gap size</div>

This is incredibly useful when you need pixel-perfect designs that don’t align with standard spacing scales. You can use any valid CSS value inside the brackets.

2. Group Hover and Focus States

UnoCSS supports modifier syntax that lets you style child elements based on parent states. This is perfect for interactive components without needing JavaScript.

<!-- Hover the parent to style children -->
<button class="group">
  <span class="text-gray-600 group-hover:text-blue-600">
    Hover me to see the effect
  </span>
  <svg class="opacity-50 group-hover:opacity-100">
    <!-- Icon here -->
  </svg>
</button>

You can also use:

  • group-focus: - for focus states
  • group-active: - for active states
  • Combine multiple modifiers: md:group-hover:text-red-500

This eliminates the need for hover/focus CSS classes on individual child elements.

3. Conditional Attribute Selectors

UnoCSS supports attribute selectors that let you style elements based on their attributes. This is a game-changer for data-driven styling.

<!-- Style based on data attributes -->
<div data-state="active" class="data-[state=active]:bg-green-100">
  Active state
</div>

<div data-state="inactive" class="data-[state=inactive]:bg-gray-100">
  Inactive state
</div>

<!-- Works with any attribute -->
<input type="checkbox" class="checked:bg-blue-500" />
<a href="#" class="[&:visited]:text-purple-600">Visited link</a>

This is powerful for:

  • Form states (checked, disabled, etc.)
  • Custom data attributes for dynamic styling
  • Visited links and other pseudo-selectors
  • Component variations without additional classes

Bonus Tip: Use Preset-Wind4

If you haven’t already, using the @unocss/preset-wind4 preset (which your project likely has) gives you Tailwind v4 compatibility with some nice additions. Check your uno.config.ts to ensure you’re getting the most out of it.

Conclusion

These three features—arbitrary values, group modifiers, and attribute selectors—can significantly reduce the amount of custom CSS you need to write. UnoCSS is designed to give you the power of a preprocessor without the compilation overhead.

What’s your favorite UnoCSS feature? Share your tips in the comments!