Merge pull request #4 from internshipsamyrai44/fix-tailwin-merge-classes

fix: correct tailwind class merge

Author: Vlad78

src/lib/utils.ts

@@ -1,5 +1,16 @@
 import { type ClassValue, clsx } from 'clsx'
-import { twMerge } from 'tailwind-merge'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+import config from '../../tailwind.config'
+
+const twMerge = extendTailwindMerge({
+  override: {
+    classGroups: {
+      'font-size': [...Object.keys(config.theme.fontSize).map(key => key)],
+      'text-color': [...Object.keys(config.theme.colors).map(key => key)],
+    },
+  },
+})
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))

tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 
-const plugin = require('tailwindcss/plugin')
+import plugin from 'tailwindcss/plugin'
 
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],

tsconfig.json

@@ -35,7 +35,8 @@
     "declarationMap": true,
 
     // Importing .js files is not allowed, enable if needed.
-    "allowJs": false,
+    "allowJs": true,
+    "checkJs": false,
 
     // Fix the mis-match of behaviors between ES import and CommonJS require.
     "esModuleInterop": true,
@@ -69,6 +70,6 @@
     "noUnusedLocals": false,
     "noUnusedParameters": true
   },
-  "include": ["src"],
+  "include": ["src", "tailwind.config"],
   "exclude": ["./src/**/*.stories.*"]
 }