feat: simplify tailwind config by introducing tailwind config wrapper

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "bradlc.vscode-tailwindcss"
+  ]
+}

src/.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "tailwindCSS.experimental.classRegex": [
+    ["tv\\((([^()]*|\\([^()]*\\))*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+  ]
+}

src/tailwind.plugin.ts

@@ -1,4 +1,8 @@
+import { NextUIPluginConfig, nextui } from "@nextui-org/react";
+import defaultsDeep from "lodash.defaultsdeep";
+import { Config } from "tailwindcss";
 import plugin from "tailwindcss/plugin"
+import { withTV } from 'tailwind-variants/transformer';
 
 export const fragmentui = () => plugin(function({ addBase, config }) {
   addBase({
@@ -8,11 +12,33 @@ export const fragmentui = () => plugin(function({ addBase, config }) {
     },
     'h2': {
       fontSize: config('theme.fontSize.2xl'),
-      fontWeight: config('theme.fontWeight.bold'),
+      fontWeight: config('theme.fontWeight.semibold'),
     },
     'h3': {
       fontSize: config('theme.fontSize.xl'),
-      fontWeight: config('theme.fontWeight.bold'),
+      fontWeight: config('theme.fontWeight.semibold'),
     },
   });
 });
+
+interface TailwindFragmentOptions {
+  nextUIPluginConfig?: NextUIPluginConfig;
+}
+
+export const withTailwindFragment = (config: Config, options?: TailwindFragmentOptions): Config => withTV({
+  darkMode: 'class',
+  ...config,
+  plugins: [
+    ...(config.plugins ?? []),
+    fragmentui(),
+    nextui(defaultsDeep(options?.nextUIPluginConfig ?? {}, {
+      themes: {
+        dark: {
+          colors: {
+            background: '#131316',
+          }
+        },
+      },
+    })),
+  ],
+});

tailwind.config.ts

@@ -1,28 +1,14 @@
 import type { Config } from 'tailwindcss';
-import { nextui } from '@nextui-org/react';
-import { fragmentui } from './src/tailwind.plugin';
+import { withTailwindFragment } from './src/tailwind.plugin';
 
-const config: Config = {
+const config: Config = withTailwindFragment({
   content: [
     './src/**/*.{js,jsx,ts,tsx}',
     './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
     extend: {},
   },
-  darkMode: 'class',
-  plugins: [
-    fragmentui(),
-    nextui({
-      themes: {
-        dark: {
-          colors: {
-            background: '#131316',
-          }
-        },
-      },
-    }),
-  ],
-};
+});
 
 export default config;