Support font-weight in font-size utilities (#8763)

* Support font-weight in font-size utilities * WIP update tests * Update changelog Co-authored-by: Jordan Pittman <jordan@cryptica.me>
tailwindlabs · Jul 4, 2022 · 6729524 · 6729524
1 parent 1318cb6
commit 6729524
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix usage of special-character prefixes ([#8772](https://github.com/tailwindlabs/tailwindcss/pull/8772))
 - Don’t prefix selectors in arbitrary variants ([#8773](https://github.com/tailwindlabs/tailwindcss/pull/8773))
 - Add support for alpha values in safe list ([#8774](https://github.com/tailwindlabs/tailwindcss/pull/8774))
+- Support default `font-weight`s in font size utilities ([#8763](https://github.com/tailwindlabs/tailwindcss/pull/8763))
 
 ## [3.1.4] - 2022-06-21
 

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -1613,14 +1613,15 @@ export let corePlugins = {
       {
         text: (value) => {
           let [fontSize, options] = Array.isArray(value) ? value : [value]
-          let { lineHeight, letterSpacing } = isPlainObject(options)
+          let { lineHeight, letterSpacing, fontWeight } = isPlainObject(options)
             ? options
             : { lineHeight: options }
 
           return {
             'font-size': fontSize,
             ...(lineHeight === undefined ? {} : { 'line-height': lineHeight }),
             ...(letterSpacing === undefined ? {} : { 'letter-spacing': letterSpacing }),
+            ...(fontWeight === undefined ? {} : { 'font-weight': fontWeight }),
           }
         },
       },

diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js
@@ -88,3 +88,34 @@ test('font-size utilities can include a default line-height and letter-spacing',
     `)
   })
 })
+
+test('font-size utilities can include a font-weight', () => {
+  let config = {
+    content: [{ raw: html`<div class="text-md text-sm text-lg"></div>` }],
+    theme: {
+      fontSize: {
+        sm: '12px',
+        md: ['16px', { lineHeight: '24px', fontWeight: 500 }],
+        lg: ['20px', { lineHeight: '28px', fontWeight: 'bold' }],
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .text-md {
+        font-size: 16px;
+        line-height: 24px;
+        font-weight: 500;
+      }
+      .text-sm {
+        font-size: 12px;
+      }
+      .text-lg {
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: bold;
+      }
+    `)
+  })
+})
diff --git a/types/config.d.ts b/types/config.d.ts
@@ -164,6 +164,7 @@ interface ThemeConfig {
           configuration: Partial<{
             lineHeight: string
             letterSpacing: string
+            fontWeight: string | number
           }>
         ]
     >