Merge pull request #102 from fabien-ml/develop

fix: #101

.changeset/cool-lamps-lie.md

@@ -0,0 +1,5 @@
+---
+"@kobalte/tailwindcss": patch
+---
+
+fix: #101

apps/playground/package.json

@@ -35,6 +35,10 @@
     "solid-js": "^1.6.1"
   },
   "devDependencies": {
+    "@kobalte/tailwindcss": "^0.4.0",
+    "autoprefixer": "10.4.13",
+    "postcss": "8.4.19",
+    "tailwindcss": "3.2.4",
     "typescript": "^4.7.4",
     "vite": "^3.0.3",
     "vite-plugin-solid": "^2.3.0"

apps/playground/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/playground/src/index.css

@@ -1,7 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/playground/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@kobalte/tailwindcss")],
+};

packages/tailwindcss/src/index.js

@@ -32,20 +32,20 @@ module.exports = plugin.withOptions(({ prefix = "ui" } = {}) => {
     for (let state of STATES) {
       addVariant(`${prefix}-${state}`, [`&[data-${state}]`]);
       addVariant(`${prefix}-not-${state}`, [`&:not([data-${state}])`]);
-      addVariant(`${prefix}-group-${state}`, `:merge(.group):[data-${state}] &`);
-      addVariant(`${prefix}-peer-${state}`, `:merge(.peer):[data-${state}] ~ &`);
+      addVariant(`${prefix}-group-${state}`, `:merge(.group)[data-${state}] &`);
+      addVariant(`${prefix}-peer-${state}`, `:merge(.peer)[data-${state}] ~ &`);
     }
 
     for (let orientation of ORIENTATIONS) {
       addVariant(`${prefix}-${orientation}`, [`&[data-orientation='${orientation}']`]);
       addVariant(`${prefix}-not-${orientation}`, [`&:not([data-orientation='${orientation}'])`]);
       addVariant(
         `${prefix}-group-${orientation}`,
-        `:merge(.group):[data-orientation='${orientation}'] &`
+        `:merge(.group)[data-orientation='${orientation}'] &`
       );
       addVariant(
         `${prefix}-peer-${orientation}`,
-        `:merge(.peer):[data-orientation='${orientation}'] ~ &`
+        `:merge(.peer)[data-orientation='${orientation}'] ~ &`
       );
     }
   };