✉️ Feature request: Add native mixins & functions support like Sass

[AyoubElarfaoui666]

✉️ Feature request: Add native mixins & functions support like Sass

Hi Tailwind CSS team 👋

First of all, thank you for the amazing work you’ve done! Tailwind has completely changed the way we write CSS and made building UIs fast, consistent, and fun.

I’d love to suggest a feature that would make Tailwind even more powerful for complex projects:
🧩 Feature idea

Add support for:

Mixins: reusable sets of utility classes or CSS rules, optionally with parameters (similar to Sass @mixin).

Functions: simple logic or transformations (like generating dynamic colors, sizes, etc.).

🎯 Why this would help

Reduce duplication: when we need similar buttons, cards, or complex layouts that only differ by color, spacing, or breakpoints.

Make code more maintainable and DRY without always having to write new utility classes in @layer components.

Bring the flexibility of Sass (parametric mixins) directly into Tailwind’s ecosystem, instead of splitting logic between Sass and Tailwind.

✅ Current workarounds

Using @apply inside @layer components to define static reusable classes.

Using Sass or Less to wrap Tailwind classes in mixins — but this makes the build more complex and less native to Tailwind.

Writing plugins or extending tailwind.config.js — which works but isn't as quick or ergonomic for everyday small patterns.

✨ How it might look (hypothetical)

@tailwind-mixin btn($bg, $color) {
@apply px-4 py-2 rounded font-semibold;
background-color: $bg;
color: $color;
&:hover {
background-color: transparent;
color: $bg;
}
}

and use it like:

.btn-primary {
@include btn(#1e40af, white);
}

I know this would be a big change and that Tailwind is intentionally utility-first, but I think it could bring the best of both worlds: fast utility building and DRY reusable logic for larger codebases.

Thank you so much for considering this!
Happy to discuss further or contribute to an RFC.

Best regards 🙏

A Tailwind user & fan