feature proposal : alias for a group of classes

[salembaira]

Hello guys, fantastic work!

Sometimes you end up reusing the same sequence of classes across your UI for divs or buttons for example. Reusable components can help but you may end up reusing the same set of classes across the reusable components too.

My proposition is to define your aliases inside theme like this :

aliases: {
  "custom-div": "space-y-20 sm:space-y-32 md:space-y-40 2xl:space-y-44 overflow-hidden pt-6 px-4 sm:px-6 lg:px-8 mx-auto max-w-screen-2xl"
}

and inside your code do use it like this :

<div className="aliases:custom-div">
  ...
</div>

What do you think?

[vovayatsyuk]

I think you can do the very same with @apply inside your css:

.custom-div {
    @apply tailwind-classes
}

<div className="custom-div">
  ...
</div>

[salembaira]

My bad, I didn't know @apply existed. It's exactly what I needed and more! Thanks ;)

[lianghx-319]

There are some different of my 「alias」.

@apply case

Input

.custom-div {
    @apply w-full flex ...
}

<div class="custom-div"><div>

Output

.custom-div {
    width: 100%;
    display: flex;
    ...
}

My alias case

Input

// tailwind config
{
  alias: {"custom-div": "w-full flex ..."}
}

<div class="custom-div"><div>

Output

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

...

<div class="w-full flex ..."><div>

This is a real reuse atomic css class, not just copy tailwind classes value into a custom class name

[vovayatsyuk]

Tailwind is generating CSS based on HTML.

The way you want it to work, you can write a replace tool that will take source HTML with "custom-class", create dist HTML with replaced "custom-clases" according to your rules.

[Detzler]

Hi @baira @vovayatsyuk
I stumbled across your discussion here and actually I currently have the same thought which you had two years ago. Instead of using apply which create duplicate css, it should be possible to use aliases that get replaced by some build tool or something.
How did you solve this issue at that time?

@vovayatsyuk @adamwathan Since everybody curse "apply" nowadays, do you know about any tools/solutions which has been created in the tailwind community to solve this issue? The alias feature by @baira makes a lot of sence.