Is it possible to build this sytle : " border-t4-indigo800 "

[ghost]

border-t4-indigo800 = " border-t-4 " + "border-indigo-800 "

I think this style is more simple ,more faster ,

1. No dash between types and values
2. merge color and location.
3. more simple, more faster
4. lessly typing
5. more flexible ( t4-indigo800 or indigo800-t4 ) works the same.

or

border-t-4-indigo-800

or

border-indigo800-t4

or

border-indigo-800-t-4

[samzlab]

Uhh... that would be a looot of variation if you think of it even if you using only the built-in values:)

There are 10 colors, 8 shades for each = 80 * 3 (hover, responsive, focus)
There are different 4 border width viariations for the 4 side = 16 * 3 (hover, responsive, focus)

It's mean this would produce 11520 different classes just for the borders :O

[simonswiss]

Hi @steveyang331 👋

This would definitely add a lot of classes to generate all possible permutation of border, border size and border colors!

I think in that case it's much better to use composition to achieve the desired result - this is what utility-first CSS is all about.

Regarding the dash between type and value, this is the convention across all Tailwind classes, and I can imagine removing it to save a few keystrokes would create a lot of confusion.

That said - it is technically possible to customise the name of classes generated by Tailwind, via the plugin system, if you wish to take control over these.

Worth scrolling up in that thread to gain some context and rationale 👍

[ghost]

I just want to lessly typing, I find type "bor", ind, and 4 , it will get "border-indigo-400" value. no need to type full words.

Thanks.

Close it .

[simonswiss]

@steveyang331 - if you want to change the class names generated, you can do so via the plugin system. Here's a very relevant post (scroll up for some context and the rationale behind the initial decision:

#102 (comment)