Tailwindcss: Font styles and weights naming

[meduzen]

Hi! I’m testing Tailwind, and have a question about some class naming.

I was expecting these rules to be declared by these classes:

• font-style: normal from .font-normal or .normal
• font-weight: regular from .font-regular or .regular

But Tailwind works this way:

• font-style: normal from .roman
• font-weight: regular from .font-normal

I find that very misleading, because:

• When I encounter .font-normal, I think about font-style: normal, not about font-weight: regular
• If I’m coding a website not using a latin alphabet (let’s say Chinese or Arabic), the word roman does not resonate in any way with font-style: normal.
• Also, roman makes me think to list-style-type: lower-roman (or upper-roman).

What are other people views on this? Can you consider to rename classes in a further breaking update?

[adamwathan]

You can change .font-normal to .font-regular in your own config if you like; we chose the font weight names based on this document from the W3C:

https://www.w3.org/TR/css-fonts-3/#font-weight-numeric-values

The .roman situation is admittedly more annoying. We wanted .italic for italicized text, so similarly wanted a single word class for undoing italic text at different breakpoints. We bikeshedded over .unitalic, .no-italics, .not-italic and others before eventually settling on .roman because "roman" is the word typographers use to refer to upright text vs. italic text:

https://en.wikipedia.org/wiki/Roman_type

I'm not opposed to changing that name but I don't want to use a name that uses the font- prefix because it would be the only class that isn't a font weight or font family class that starts with font-.

[adamwathan]

Having not thought about the roman stuff in like 5 months, I think I'd be happy with .not-italic if that works for others.

[adamwathan]

Renamed .roman to .not-italic for 0.5.0 which will be out today. We might change the default font weight utility names one day but right now it's not in our plans.

[meduzen]

Good solution from my point of view. Also more consistent with .no-underline.

[adamwathan]

Welp I remembered why we didn't use not-italic; it breaks cssnext:

https://github.com/postcss/postcss-selector-not/issues/10

So now I've got a broken 0.5.0 build on my hands for anyone using cssnext 😔Need a new name that doesn't start with not because I don't expect that package to fix that issue any time soon.

[adamwathan]

I've reverted back to .roman for now, hopefully that package will fix that issue and we can revisit this then.