Merge pull request #31 from SpiderDan98/feat/add-leading-shorthand

feat: add leading shorthand

Author: davidhellmann

README.md

@@ -371,6 +371,16 @@ export function cn(...inputs: ClassValue[]) {
 
 ```
 
+### Overwrite default line-height
+
+Sometimes it may be useful to override the default line height that you set in your config. Therefore, this plugin supports the Tailwind font size line-height shorthand. This works as follows.
+
+```html
+<h1 class="text-9xl/snug">The quick brown fox jumps over the lazy dogs</h1>
+```
+
+See the [official Tailwind documentation](https://tailwindcss.com/blog/tailwindcss-v3-3#new-line-height-shorthand-for-font-size-utilities) for more information.
+
 ## 👉🏻 Live Demo
 
 [Fluid Type Live Demo](https://play.tailwindcss.com/TegGD6vkSM)

src/index.js

@@ -5,8 +5,8 @@ const createThemeOptions = require('./utils/createThemeOptions')
 
 module.exports = plugin.withOptions(
     function (options) {
-        return function ({addUtilities, variants, e}) {
-            addUtilities(createClasses(options, e),
+        return function ({addUtilities, variants, e, theme}) {
+            addUtilities(createClasses(options, e, theme),
                 variants('fontSizeFluid', defaults.variants));
         };
     },

src/utils/createClasses.js

@@ -1,8 +1,9 @@
 const calcModularScale = require('./calcModularScale')
 const createData = require('./createData')
 const defaults = require("../config/defaults");
+const createLeadingClasses = require('./createLeadingClasses');
 
-module.exports = (options, e) => {
+module.exports = (options, e, theme) => {
     const data = createData(options, {}, defaults)
 
     if (data.values) {
@@ -47,9 +48,7 @@ module.exports = (options, e) => {
                 }
             }
 
-            return {
-                [`.${e(`${data.prefix}text-${key}`)}`]: output,
-            }
+            return createLeadingClasses(`.${e(`${data.prefix}text-${key}`)}`, output, e, theme)
         })
     }
 }

src/utils/createLeadingClasses.js

@@ -0,0 +1,15 @@
+module.exports = (className, output, e, theme) => {
+  const lineHeights = theme('lineHeight')
+
+  const defaultClass = {
+    [className]: output,
+  }
+
+  return Object.entries(lineHeights).reduce((classes, [name, lineHeight]) => ({
+    ...classes,
+    [`${className}${e(`/${name}`)}`]: {
+        ...output,
+        lineHeight,
+    }
+  }), defaultClass)
+}