feat: support tailwindcss v4 (#245)

* feat: support tailwindcss v4

* feat: support tailwindcss v4

* fix: pkg

Author: winchesHe

README.md

@@ -20,17 +20,21 @@
 ## Features
 
 - First-class variant API
-- Responsive variants
 - Slots support
 - Composition support
 - Fully typed
 - Framework agnostic
 - Automatic conflict resolution
+- Tailwindcss V4 support
 
 ## Documentation
 
 For full documentation, visit [tailwind-variants.org](https://tailwind-variants.org)
 
+> ❕ Note: `Tailwindcss V4` no longer supports the `config.content.transform` so we remove the `responsive variants` feature
+>
+> If you want to use `responsive variants`, you need to add it manually to your classname.
+
 ## Quick Start
 
 1. Installation:
@@ -75,46 +79,6 @@ const button = tv({
 return <button className={button({size: "sm", color: "secondary"})}>Click me</button>;
 ```
 
-3. Responsive variants configuration (optional): If you want to use responsive variants
-   you need to add the Tailwind Variants `wrapper` to your TailwindCSS config file `tailwind.config.js`.
-
-```js
-// tailwind.config.js
-
-const {withTV} = require("tailwind-variants/transformer");
-
-/** @type {import('tailwindcss').Config} */
-module.exports = withTV({
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-});
-```
-
-If you're using a custom path to import Tailwind variants, such as creating a custom tv instance with `createTV`, it's recommended to include this path in the transformer configuration:
-
-```js
-// tailwind.config.js
-
-const {withTV} = require("tailwind-variants/transformer");
-
-/** @type {import('tailwindcss').Config} */
-module.exports = withTV(
-  {
-    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-    theme: {
-      extend: {},
-    },
-    plugins: [],
-  },
-  {
-    aliases: ["@/lib/tv"],
-  },
-);
-```
-
 ## Acknowledgements
 
 - [**cva**](https://github.com/joe-bell/cva) ([Joe Bell](https://github.com/joe-bell))

clean-package.config.json

@@ -11,11 +11,6 @@
         "types": "./dist/index.d.ts"
       },
       "./dist/*": "./dist/*",
-      "./transformer": {
-        "require": "./dist/transformer.cjs",
-        "types": "./dist/transformer.d.ts",
-        "default": "./dist/transformer.js"
-      },
       "./package.json": "./package.json"
     }
   }

package.json

@@ -20,12 +20,11 @@
   "sideEffects": false,
   "files": [
     "dist",
-    "transformer.js",
-    "transformer.d.ts",
     "README.md",
     "LICENSE"
   ],
   "scripts": {
+    "dev": "tsup --watch",
     "build": "tsup && node copy-types.cjs",
     "typecheck": "tsc --noEmit",
     "prepack": "clean-package",
@@ -37,7 +36,7 @@
     "test:watch": "jest --watch --no-verbose"
   },
   "dependencies": {
-    "tailwind-merge": "2.5.4"
+    "tailwind-merge": "3.0.2"
   },
   "devDependencies": {
     "@commitlint/cli": "19.5.0",
@@ -66,10 +65,11 @@
     "eslint-plugin-promise": "7.1.0",
     "expect": "29.7.0",
     "jest": "29.7.0",
+    "postcss": "8.5.3",
     "prettier": "3.3.3",
     "prettier-eslint": "16.3.0",
     "prettier-eslint-cli": "8.0.1",
-    "tailwindcss": "3.4.14",
+    "tailwindcss": "4.0.12",
     "ts-node": "10.9.2",
     "tsup": "8.3.5",
     "typescript": "5.6.3"