dev ed SLAMMING tailwind

[torian257x]

https://www.youtube.com/watch?v=ObZwFExwzOo

and yes I'm trying to stir up a scandal with the sensational title jkjk

it's the first entry as well.

Where I think he is right?

naming convention, missed opportunity on auto complete.

font-style normal? .not-italic of course!

line-height: 2? .leading-loose

color? .text-black

font-size: 1.5rem;? .text-2xl

font-family? .font-sans

it's all about text, but you cannot find any of those styles (except maybe text-black) unless you look in the documentation. That is bad DX, by the time you learn "leading-loose" is line-height: 2 (etc) you might have as well just written it yourself.

I feel like its a huge missed opportunity

e.g. what I would have done? everything about text under .text

call it .text-lh-2 if you want instead of line-height. It will be enough so people understand it when they see it in the autocomplete as option

.text-bold
.text-center
.text-normal

colors I would probably put where i can see all colors

e.g. instead of
.text-black I would create .text-color- that way one can see all colors and select one

you know what I mean? make autocomplete your friend, not foe.

[torian257x]

is there maybe a way to rename all utility classes to my liking?

[simonswiss]

Hey 👋

#102 (comment) documents what you're looking for.

[torian257x]

@simonswiss thanks, highly appreciated. You don't know by chance if someone actually created a project with adam's snippet? e.g. a rewrite of the class names that exists already?

if not, what would you have, subjectively, changed in the class names?
for example in my css project I had 1rem = 10px. And padding-t-1 meant padding-top: 1rem. padding-t-0d5 means padding-top: 0.5rem and I didnt mind it that way. (d standing for decimal point)

No "double mental jump" like it is currently: e.g. p-1 means 0.25rem,and 0.25rem means 0.25*16px e.g. 4 pixels

or am I missing some mental shortcut somewhere? I guess the numbers stand for increments of 4px each. That way, it's still a single mental jump though. (e.g. how much is pt-16 really? 16*4)

I'll look how easy it is actually to overwrite... I thought back and forth, and came to the conclusion that

a) adam is right to not change it (If I was him, I would tell everyone nagging about the class names as well - to get lost)
b) someone def. should provide an alternative though (the argument "transition is harder for someone already used to it" doesn't count - the idea is that it is easy to use from the get go with the new approach)

any thoughts?

[simonswiss]

Hey,

My thoughts are 100% that it's going to be more mental work to convert all the class names to what you feel would be more intuitive than actually getting used to what's in place.

This is just for your personally, but then imagine onboarding other people to your project, and they have no documentation to refer to because you built a unique, different system? Or would you generate your own documentation for your own version of the framework?

What about jumping onto other Tailwind CSS projects? You can't use them because they're using a different naming convention than the custom one you created 😅

I honestly think that sticking to the conventions that were decided is a much better use of your time and cognitive energy.

But - if you see otherwise - the option to customise the class names is there, with he plugin API 👍

[torian257x]

thanks for the comment

so you think it's basically useless to do, ok got it.

having said that, what would you change, if you were forced against your will - at gun point - to change something? any thoughts / ideas in that category?

[simonswiss]

• leading-7 -> lh-7

Please don't shoot 😅

PS: reason it's font-bold and not text-bold is the heaviest weight is called black, and text-black is already used for color: black;

text-black: color: black;
font-black: font-weight: 900;

[swyxio]

let's please avoid click bait here. the maintainers are swamped enough as it is. you can put this in the Tailwind Discord.

[torian257x]

is there a way to rename all utility classes?