feat: add tw variants

.prettierrc

@@ -7,5 +7,6 @@
   "useTabs": false,
   "semi": true,
   "bracketSpacing": true,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindFunctions": ["tv"]
 }

.vscode/settings.json

@@ -2,5 +2,11 @@
   "files.associations": {
     "*.scss": "tailwindcss"
   },
-  "tailwindCSS.experimental.configFile": "src/index.scss"
+  "tailwindCSS.experimental.configFile": "src/index.scss",
+  "tailwindCSS.experimental.classRegex": [
+    [
+      "([\"'`][^\"'`]*.*?[\"'`])",
+      "[\"'`]([^\"'`]*).*?[\"'`]"
+    ]
+  ]
 }

bun.lock

@@ -11,6 +11,7 @@
         "postcss": "^8.5.3",
         "preact": "^10.26.2",
         "tailwind-merge": "^3.0.2",
+        "tailwind-variants": "^1.0.0",
         "tailwindcss": "^4.0.17",
       },
       "devDependencies": {
@@ -663,6 +664,8 @@
 
     "tailwind-merge": ["tailwind-merge@3.0.2", "", {}, "sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw=="],
 
+    "tailwind-variants": ["tailwind-variants@1.0.0", "", { "dependencies": { "tailwind-merge": "3.0.2" }, "peerDependencies": { "tailwindcss": "*" } }, "sha512-2WSbv4ulEEyuBKomOunut65D8UZwxrHoRfYnxGcQNnHqlSCp2+B7Yz2W+yrNDrxRodOXtGD/1oCcKGNBnUqMqA=="],
+
     "tailwindcss": ["tailwindcss@4.0.17", "", {}, "sha512-OErSiGzRa6rLiOvaipsDZvLMSpsBZ4ysB4f0VKGXUrjw2jfkJRd6kjRKV2+ZmTCNvwtvgdDam5D7w6WXsdLJZw=="],
 
     "tapable": ["tapable@2.2.1", "", {}, "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ=="],

package.json

@@ -16,6 +16,7 @@
     "postcss": "^8.5.3",
     "preact": "^10.26.2",
     "tailwind-merge": "^3.0.2",
+    "tailwind-variants": "^1.0.0",
     "tailwindcss": "^4.0.17"
   },
   "devDependencies": {

src/app.tsx

@@ -1,12 +1,13 @@
 import { useSignal } from "@preact/signals";
 import "preact/debug";
 import classes from "./app.module.scss";
+import Button from "./components/ui/Button";
 export function App() {
   const counter = useSignal(0);
   return (
     <>
       <h1 class={classes.text}>Hello, World!</h1>
-      <button onClick={() => counter.value++}>Count: {counter.value}</button>
+      <Button onClick={() => counter.value++}>Count: {counter.value}</Button>
     </>
   );
 }

src/components/ui/Button.module.scss

@@ -0,0 +1,5 @@
+@reference '../../index.scss';
+
+.button {
+  @apply rounded-2xl border-2 border-black p-5 text-white;
+}

src/components/ui/Button.tsx

@@ -0,0 +1,22 @@
+import { FunctionComponent } from "preact";
+import { tv } from "tailwind-variants";
+import classes from "./Button.module.scss";
+const button = tv({
+  base: classes.button,
+  variants: {
+    color: {
+      primary: "bg-blue-400",
+      secondary: "bg-red-400",
+    },
+  },
+});
+
+const Button: FunctionComponent<{ onClick: () => void }> = (props) => {
+  return (
+    <button type="button" class={button({ color: "primary" })} onClick={props.onClick}>
+      {props.children}
+    </button>
+  );
+};
+
+export default Button;