Inconsistent class names

[jenstornell]

I think there are cases where the class names are inconsistent.

Different levels of prefix

underline
font-bold

Better solution?

underline
bold

Different hyphen

uppercase
normal-case

Better solution?

uppercase
normalcase

Font vs text

What is the difference between a font style and a text visually? I dare to say none.

font-bold
text-2xl
font-serif
text-opacity-50

Better solution?

Because most of the class names are prefixed with text- I think it would be used for font as well.

text-bold
text-2xl
text-serif
text-opacity-50

Summary

The only downside I see is that people already has learned these names, but it's a big downside to all Tailwind projects in the world to change. Maybe think about it for a major version?

[adamwathan]

Hey! Unfortunately there's no chance we make drastic changes here because it would be a huge breaking change for thousands of users and would be very painful to upgrade.

There are lots of reasons why things are the way they are, here's a few:

underline vs font-bold, here we use font-bold instead of bold because the word bold comes from the user's config file, and we have a convention that any classes generated from the config file always have some sort of namespace. Someone can make a custom font-weight called bg-black, and currently that creates a class called font-bg-black. Without a prefix it would be just bg-black which is weird. So for anything where the class name is configurable, we make sure there is always a common prefix so it's identifiable.

uppercase vs. normal-case, we chose uppercase because that's the exact CSS value, and normal-case because I guess we thought it looked nicer at the time. Just normalcase probably would've been fine too, but not going to make a BC break for it.

font-* vs. text-*, we separated these to avoid naming collisions. There is currently a font-black classes for font-weight: 900 and text-black for color: #000. The mental model here is font prefix is for things that use separate font files (weight and family), and text is for changes to the text that use the same font file.

[jenstornell]

Very good reply! Not only does it tell why you use the names as you do. It also helps out to make it easier to remember when to use which.

Thanks!