SUM-253 | customTwMerge (#67)

src/components/elements/headers.tsx

@@ -1,5 +1,5 @@
+import twMerge from "@lib/utils/twMergeConfig"
 import {HtmlHTMLAttributes} from "react"
-import {twMerge} from "tailwind-merge"
 
 type Props = HtmlHTMLAttributes<HTMLHeadingElement>
 

src/lib/utils/twMergeConfig.tsx

@@ -0,0 +1,18 @@
+import {extendTailwindMerge} from "tailwind-merge"
+
+// Creates an array containing type-# classes from 0 to 1
+const typeClasses = Array.from({length: 10}, (_, i) => `type-${i}`)
+// Creates an array containing text-# classes from 11 to 30
+const textClasses = Array.from({length: 20}, (_, i) => `text-${i + 11}`)
+
+const typographyClasses = [...textClasses, ...typeClasses]
+
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": typographyClasses,
+    },
+  },
+})
+
+export default twMerge

tailwind.config.js

@@ -1,27 +1,26 @@
 /** @type {import('tailwindcss').Config} */
 
-const decanter = require('decanter');
+const decanter = require("decanter")
 
-const path = require('path');
-const dir = path.resolve(__dirname, 'src/styles');
+const path = require("path")
+const dir = path.resolve(__dirname, "src/styles")
 
-let twoColumn = {}, threeColumn = {}, i;
+let twoColumn = {},
+  threeColumn = {},
+  i
 for (i = 1; i <= 4; i++) {
-  twoColumn[`1-${i}`] = `minmax(0, 1fr) minmax(0, ${i}fr)`;
-  twoColumn[`${i}-1`] = `minmax(0, ${i}fr) minmax(0, 1fr)`;
+  twoColumn[`1-${i}`] = `minmax(0, 1fr) minmax(0, ${i}fr)`
+  twoColumn[`${i}-1`] = `minmax(0, ${i}fr) minmax(0, 1fr)`
 }
 
 for (i = 1; i <= 4; i++) {
-  threeColumn[`${i}-1-1`] = `minmax(0, ${i}fr) minmax(0, 1fr) minmax(0, 1fr)`;
-  threeColumn[`1-${i}-1`] = `minmax(0, 1fr) minmax(0, ${i}fr) minmax(0, 1fr)`;
-  threeColumn[`1-1-${i}`] = `minmax(0, 1fr) minmax(0, 1fr) minmax(0, ${i}fr)`;
+  threeColumn[`${i}-1-1`] = `minmax(0, ${i}fr) minmax(0, 1fr) minmax(0, 1fr)`
+  threeColumn[`1-${i}-1`] = `minmax(0, 1fr) minmax(0, ${i}fr) minmax(0, 1fr)`
+  threeColumn[`1-1-${i}`] = `minmax(0, 1fr) minmax(0, 1fr) minmax(0, ${i}fr)`
 }
 
 module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}"],
   theme: {
     fontFamily: decanter.theme.fontFamily,
     decanter: decanter.theme.decanter,
@@ -33,32 +32,32 @@ module.exports = {
       },
       gridTemplateColumns: {...twoColumn, ...threeColumn},
       containers: {
-        '8xl': '80rem',
-        '9xl': '90rem',
-        '10xl': '100rem',
-        '11xl': '110rem',
-        '12xl': '120rem',
-        '13xl': '130rem',
-        '14xl': '140rem',
-        '15xl': '150rem',
+        "8xl": "80rem",
+        "9xl": "90rem",
+        "10xl": "100rem",
+        "11xl": "110rem",
+        "12xl": "120rem",
+        "13xl": "130rem",
+        "14xl": "140rem",
+        "15xl": "150rem",
       },
       screens: {
-        '4xl': '2000px',
+        "4xl": "2000px",
       },
       scale: {
-        '-100': '-1'
+        "-100": "-1",
       },
       fontFamily: {
-        roboto: ['var(--font-roboto)', 'sans-serif'],
+        roboto: ["var(--font-roboto)", "sans-serif"],
       },
     },
   },
   plugins: [
     ...decanter.plugins,
-    require('@tailwindcss/container-queries'),
+    require("@tailwindcss/container-queries"),
     require(`${dir}/typography/local-footer.tsx`)(),
     require(`${dir}/typography/global-message.tsx`)(),
     require(`${dir}/typography/wysiwyg.tsx`)(),
     require(`${dir}/centered-container.tsx`)(),
   ],
-};
+}

tsconfig.json

@@ -20,6 +20,12 @@
       "@lib/*": ["./src/lib/*"]
     }
   },
-  "include": ["next-env.d.ts", "src/**/*.tsx", "app/**/*.tsx", ".storybook/stories/**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "src/**/*.tsx",
+    "app/**/*.tsx",
+    ".storybook/stories/**/*.tsx",
+    ".next/types/**/*.ts",
+  ],
   "exclude": ["node_modules"]
 }