<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/the-css-utility-hybrid-approach-with-tailwind-v4-n6chmveep" -->

---
title: The CSS / Utility hybrid approach with Tailwind v4
description: Learn about the CSS + Tailwind hybrid approach in Tailwind v4, including best practices for combining CSS with utility classes, the advantages of the hybrid...
canonical: https://daily.dev/posts/the-css-utility-hybrid-approach-with-tailwind-v4-n6chmveep
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: The CSS / Utility hybrid approach with Tailwind v4 | daily.dev
og:description: Learn about the CSS + Tailwind hybrid approach in Tailwind v4, including best practices for combining CSS with utility classes, the advantages of the hybrid...
og:url: https://daily.dev/posts/the-css-utility-hybrid-approach-with-tailwind-v4-n6chmveep
og:image: https://api.daily.dev/og/posts/n6chMveEp.png
og:image:alt: The CSS / Utility hybrid approach with Tailwind v4
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# The CSS / Utility hybrid approach with Tailwind v4

**[This Dot](https://daily.dev/sources/thisdot)** · 7 min read · 5 upvotes · 3 comments

## Summary

Learn about the CSS + Tailwind hybrid approach in Tailwind v4, including best practices for combining CSS with utility classes, the advantages of the hybrid approach, and interesting utility hybrid patterns when combining modern CSS with utility classes.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://www.thisdot.co/blog/the-css-utility-hybrid-approach-with-tailwind-v4>

## Community discussion

Top comments from developers on daily.dev.

**@ghost** · 2 upvotes

> How to reinventing SCSS and mixins without saying you're reinventing SCSS and mixins

**@juagarc4** · 0 upvotes

> Really. On each new update I'm more and more convinced that reject using Tailwind was and is a good decision.
>
> For example:
>
> "Classes as components
> Tailwind has always recommended using a component system for your UI components ... like buttons, badges, links.
> You can use Tailwind CSS with the @apply directive or traditional class definitions for this:
>
> .badge {
> 	 @apply inline-flex items-center gap-x-1.5 rounded-md py-0.5 text-sm/5 font-medium sm:text-xs/5;
> }
> <span class="badge badge--yellow">Warning</span>
> "
>
> What is exactly what you do defining your (S)CSS without using Tailwind....

**@buckrussell** · 0 upvotes

> No matter how many times I tell myself I am going to stick to pure tailwind on my next project, I always end up hybrid.

---

Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#tailwind-css](https://daily.dev/tags/tailwind-css)

[View this post on daily.dev](https://daily.dev/posts/the-css-utility-hybrid-approach-with-tailwind-v4-n6chmveep)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"The CSS / Utility hybrid approach with Tailwind v4","url":"https://daily.dev/posts/the-css-utility-hybrid-approach-with-tailwind-v4-n6chmveep","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-css-utility-hybrid-approach-with-tailwind-v4-n6chmveep"},"datePublished":"2024-05-10T13:10:12.099Z","dateModified":"2024-05-10T13:10:11.386Z","description":"Learn about the CSS + Tailwind hybrid approach in Tailwind v4, including best practices for combining CSS with utility classes, the advantages of the hybrid...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/8ef9f74b52b7eca2ea5ba0ac60d845cc?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/8ef9f74b52b7eca2ea5ba0ac60d845cc?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"This Dot","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"This Dot","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/6e22565142ee45b386c8bc12bdb3d117","url":"https://daily.dev/sources/thisdot"},"commentCount":3,"discussionUrl":"https://daily.dev/posts/the-css-utility-hybrid-approach-with-tailwind-v4-n6chmveep","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":3}],"keywords":"webdev,css,tailwind-css","timeRequired":"PT7M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"This Dot","item":"https://daily.dev/sources/thisdot"},{"@type":"ListItem","position":3,"name":"The CSS / Utility hybrid approach with Tailwind v4"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-css-utility-hybrid-approach-with-tailwind-v4-n6chmveep","comment":[{"@type":"Comment","text":"How to reinventing SCSS and mixins without saying you’re reinventing SCSS and mixins","datePublished":"2024-05-13T12:21:21.300Z","url":"https://daily.dev/posts/n6chMveEp#c-EgMFNKFyk","author":{"@type":"Person","name":"Deleted user","url":"https://daily.dev/ghost","image":"https://media.daily.dev/image/upload/s--hNIUzLiO--/f_auto/v1705327420/public/ghost_vlftth"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Really. On each new update I’m more and more convinced that reject using Tailwind was and is a good decision.\nFor example:\n&quot;Classes as components\nTailwind has always recommended using a component system for your UI components … like buttons, badges, links.\nYou can use Tailwind CSS with the @apply directive or traditional class definitions for this:\n.badge {\n@apply inline-flex items-center gap-x-1.5 rounded-md py-0.5 text-sm/5 font-medium sm:text-xs/5;\n}\n&lt;span class=“badge badge–yellow”&gt;Warning&lt;/span&gt;\n&quot;\nWhat is exactly what you do defining your (S)CSS without using Tailwind. Awesome,  a new re-invented wheel, but now adding complexity by missing approaches!!","datePublished":"2024-05-29T09:26:21.007Z","dateModified":"2024-05-29T09:27:54.495Z","url":"https://daily.dev/posts/n6chMveEp#c-cIi50fk9I","author":{"@type":"Person","name":"Raul Garcia","url":"https://daily.dev/juagarc4","image":"https://avatars.githubusercontent.com/u/13120286?v=4"}},{"@type":"Comment","text":"No matter how many times I tell myself I am going to stick to pure tailwind on my next project, I always end up hybrid.","datePublished":"2024-05-12T14:45:49.441Z","url":"https://daily.dev/posts/n6chMveEp#c-eZJPvt2bQ","author":{"@type":"Person","name":"Buck","url":"https://daily.dev/buckrussell","image":"https://media.daily.dev/image/upload/s--6wkUoAWm--/f_auto/v1712861324/avatars/avatar_RdS9XRvHMSzTx38wcSiYg"}}]}
```