Repository: tailwindlabs/tailwindcss (TypeScript)
Date: 2018-03-12 16:16:52+00:00
Task type: Refactoring

Issue:
Font styles and weights naming
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`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type) (or `upper-roman`).

What are other people views on this? Can you consider to rename classes in a further breaking update?


Issue discussion:
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-`.

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.

Solution patch:
diff --git a/src/generators/textStyle.js b/src/generators/textStyle.js
--- a/src/generators/textStyle.js
+++ b/src/generators/textStyle.js
@@ -3,7 +3,7 @@ import defineClasses from '../util/defineClasses'
 export default function() {
   return defineClasses({
     italic: { 'font-style': 'italic' },
-    roman: { 'font-style': 'normal' },
+    'not-italic': { 'font-style': 'normal' },
 
     uppercase: { 'text-transform': 'uppercase' },
     lowercase: { 'text-transform': 'lowercase' },


Test patch:
diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
--- a/__tests__/fixtures/tailwind-output.css
+++ b/__tests__/fixtures/tailwind-output.css
@@ -4205,7 +4205,7 @@ button,
   font-style: italic;
 }
 
-.roman {
+.not-italic {
   font-style: normal;
 }
 
@@ -4251,7 +4251,7 @@ button,
   font-style: italic;
 }
 
-.hover\:roman:hover {
+.hover\:not-italic:hover {
   font-style: normal;
 }
 
@@ -8084,7 +8084,7 @@ button,
     font-style: italic;
   }
 
-  .sm\:roman {
+  .sm\:not-italic {
     font-style: normal;
   }
 
@@ -8130,7 +8130,7 @@ button,
     font-style: italic;
   }
 
-  .sm\:hover\:roman:hover {
+  .sm\:hover\:not-italic:hover {
     font-style: normal;
   }
 
@@ -11964,7 +11964,7 @@ button,
     font-style: italic;
   }
 
-  .md\:roman {
+  .md\:not-italic {
     font-style: normal;
   }
 
@@ -12010,7 +12010,7 @@ button,
     font-style: italic;
   }
 
-  .md\:hover\:roman:hover {
+  .md\:hover\:not-italic:hover {
     font-style: normal;
   }
 
@@ -15844,7 +15844,7 @@ button,
     font-style: italic;
   }
 
-  .lg\:roman {
+  .lg\:not-italic {
     font-style: normal;
   }
 
@@ -15890,7 +15890,7 @@ button,
     font-style: italic;
   }
 
-  .lg\:hover\:roman:hover {
+  .lg\:hover\:not-italic:hover {
     font-style: normal;
   }
 
@@ -19724,7 +19724,7 @@ button,
     font-style: italic;
   }
 
-  .xl\:roman {
+  .xl\:not-italic {
     font-style: normal;
   }
 
@@ -19770,7 +19770,7 @@ button,
     font-style: italic;
   }
 
-  .xl\:hover\:roman:hover {
+  .xl\:hover\:not-italic:hover {
     font-style: normal;
   }