Repository: tailwindlabs/tailwindcss (ts)

Issue:
font weight `font-thin` is different with 'OpenType specification'
1.https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass
2.https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping

Pull request description:
Rename hairline and thin font weights to thin and extralight
This PR renames the `font-hairline` and `font-thin` classes to `font-thin` and `font-extralight` respectively to align with the OpenType spec.

This is a breaking chance so this is behind a `future` flag called `standardFontWeights` until 2.0.

Upgrade strategy is find and replace `font-thin` to `font-extralight`, then replace `font-hairline` with `font-thin`. Should be very easy and reliable to change with find and replace.

Resolves #1128.

Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 19e4e1e6..be2feccb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 - Fix [issue](https://github.com/tailwindlabs/tailwindcss/issues/2258) where inserting extra PurgeCSS control comments could break integrated PurgeCSS support
+- Rename `font-hairline` and `font-thin` to `font-thin` and `font-extralight` behind `standardFontWeights` flag ([#2333](https://github.com/tailwindlabs/tailwindcss/pull/2333))
 
 ## [1.8.3] - 2020-09-05
 
diff --git a/src/featureFlags.js b/src/featureFlags.js
index 7df28441..f954fe0f 100644
--- a/src/featureFlags.js
+++ b/src/featureFlags.js
@@ -3,7 +3,7 @@ import chalk from 'chalk'
 import log from './util/log'
 
 const featureFlags = {
-  future: ['removeDeprecatedGapUtilities', 'purgeLayersByDefault'],
+  future: ['removeDeprecatedGapUtilities', 'purgeLayersByDefault', 'standardFontWeights'],
   experimental: [
     'uniformColorPalette',
     'extendedSpacingScale',
diff --git a/src/flagged/standardFontWeights.js b/src/flagged/standardFontWeights.js
new file mode 100644
index 00000000..58f02ad9
--- /dev/null
+++ b/src/flagged/standardFontWeights.js
@@ -0,0 +1,15 @@
+export default {
+  theme: {
+    fontWeight: {
+      thin: '100',
+      extralight: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+    },
+  },
+}
diff --git a/src/index.js b/src/index.js
index 18f7ae04..ad5f2c9e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -18,6 +18,7 @@ import extendedSpacingScale from './flagged/extendedSpacingScale.js'
 import defaultLineHeights from './flagged/defaultLineHeights.js'
 import extendedFontSizeScale from './flagged/extendedFontSizeScale.js'
 import darkModeVariant from './flagged/darkModeVariant.js'
+import standardFontWeights from './flagged/standardFontWeights'
 
 function getAllConfigs(config) {
   const configs = [defaultConfig]
@@ -38,6 +39,10 @@ function getAllConfigs(config) {
     configs.unshift(extendedFontSizeScale)
   }
 
+  if (flagEnabled(config, 'standardFontWeights')) {
+    configs.unshift(standardFontWeights)
+  }
+
   if (flagEnabled(config, 'darkModeVariant')) {
     configs.unshift(darkModeVariant)
     if (Array.isArray(config.plugins)) {


Test patch:
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
index df6557ab..e92760ef 100644
--- a/__tests__/fixtures/tailwind-output-flagged.css
+++ b/__tests__/fixtures/tailwind-output-flagged.css
@@ -20817,11 +20817,11 @@ video {
   font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
-.font-hairline {
+.font-thin {
   font-weight: 100;
 }
 
-.font-thin {
+.font-extralight {
   font-weight: 200;
 }
 
@@ -20853,11 +20853,11 @@ video {
   font-weight: 900;
 }
 
-.hover\:font-hairline:hover {
+.hover\:font-thin:hover {
   font-weight: 100;
 }
 
-.hover\:font-thin:hover {
+.hover\:font-extralight:hover {
   font-weight: 200;
 }
 
@@ -20889,11 +20889,11 @@ video {
   font-weight: 900;
 }
 
-.focus\:font-hairline:focus {
+.focus\:font-thin:focus {
   font-weight: 100;
 }
 
-.focus\:font-thin:focus {
+.focus\:font-extralight:focus {
   font-weight: 200;
 }
 
@@ -62315,11 +62315,11 @@ video {
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
-  .sm\:font-hairline {
+  .sm\:font-thin {
     font-weight: 100;
   }
 
-  .sm\:font-thin {
+  .sm\:font-extralight {
     font-weight: 200;
   }
 
@@ -62351,11 +62351,11 @@ video {
     font-weight: 900;
   }
 
-  .sm\:hover\:font-hairline:hover {
+  .sm\:hover\:font-thin:hover {
     font-weight: 100;
   }
 
-  .sm\:hover\:font-thin:hover {
+  .sm\:hover\:font-extralight:hover {
     font-weight: 200;
   }
 
@@ -62387,11 +62387,11 @@ video {
     font-weight: 900;
   }
 
-  .sm\:focus\:font-hairline:focus {
+  .sm\:focus\:font-thin:focus {
     font-weight: 100;
   }
 
-  .sm\:focus\:font-thin:focus {
+  .sm\:focus\:font-extralight:focus {
     font-weight: 200;
   }
 
@@ -103783,11 +103783,11 @@ video {
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
-  .md\:font-hairline {
+  .md\:font-thin {
     font-weight: 100;
   }
 
-  .md\:font-thin {
+  .md\:font-extralight {
     font-weight: 200;
   }
 
@@ -103819,11 +103819,11 @@ video {
     font-weight: 900;
   }
 
-  .md\:hover\:font-hairline:hover {
+  .md\:hover\:font-thin:hover {
     font-weight: 100;
   }
 
-  .md\:hover\:font-thin:hover {
+  .md\:hover\:font-extralight:hover {
     font-weight: 200;
   }
 
@@ -103855,11 +103855,11 @@ video {
     font-weight: 900;
   }
 
-  .md\:focus\:font-hairline:focus {
+  .md\:focus\:font-thin:focus {
     font-weight: 100;
   }
 
-  .md\:focus\:font-thin:focus {
+  .md\:focus\:font-extralight:focus {
     font-weight: 200;
   }
 
@@ -145251,11 +145251,11 @@ video {
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
-  .lg\:font-hairline {
+  .lg\:font-thin {
     font-weight: 100;
   }
 
-  .lg\:font-thin {
+  .lg\:font-extralight {
     font-weight: 200;
   }
 
@@ -145287,11 +145287,11 @@ video {
     font-weight: 900;
   }
 
-  .lg\:hover\:font-hairline:hover {
+  .lg\:hover\:font-thin:hover {
     font-weight: 100;
   }
 
-  .lg\:hover\:font-thin:hover {
+  .lg\:hover\:font-extralight:hover {
     font-weight: 200;
   }
 
@@ -145323,11 +145323,11 @@ video {
     font-weight: 900;
   }
 
-  .lg\:focus\:font-hairline:focus {
+  .lg\:focus\:font-thin:focus {
     font-weight: 100;
   }
 
-  .lg\:focus\:font-thin:focus {
+  .lg\:focus\:font-extralight:focus {
     font-weight: 200;
   }
 
@@ -186719,11 +186719,11 @@ video {
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   }
 
-  .xl\:font-hairline {
+  .xl\:font-thin {
     font-weight: 100;
   }
 
-  .xl\:font-thin {
+  .xl\:font-extralight {
     font-weight: 200;
   }
 
@@ -186755,11 +186755,11 @@ video {
     font-weight: 900;
   }
 
-  .xl\:hover\:font-hairline:hover {
+  .xl\:hover\:font-thin:hover {
     font-weight: 100;
   }
 
-  .xl\:hover\:font-thin:hover {
+  .xl\:hover\:font-extralight:hover {
     font-weight: 200;
   }
 
@@ -186791,11 +186791,11 @@ video {
     font-weight: 900;
   }
 
-  .xl\:focus\:font-hairline:focus {
+  .xl\:focus\:font-thin:focus {
     font-weight: 100;
   }
 
-  .xl\:focus\:font-thin:focus {
+  .xl\:focus\:font-extralight:focus {
     font-weight: 200;
   }