hazo_config 2.1.2 → 2.1.4

package/CHANGE_LOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2.1.3
+- chore: upgrade to Tailwind CSS v4 (`tailwindcss`, `@tailwindcss/postcss`); switch PostCSS pipeline to `@tailwindcss/postcss` and drop `autoprefixer`
+- chore: update `globals.css` to v4 syntax (`@import "tailwindcss"`, `@custom-variant dark`, `@config` reference)
+- chore: bump `peerDependencies.tailwindcss` to `^4.0.0`
+- chore: align canonical workspace dep versions (`clsx ^2.1.1`, `tailwind-merge ^3.5.0`, `@types/node ^20.14.10`, `@types/react ^18.3.3`, `@types/react-dom ^18.3.0`, `postcss ^8.4.49`, `typescript ^5.7.2`, `hazo_connect ^2.4.0`)
+- docs: README and SETUP_CHECKLIST refreshed for Tailwind v4 setup
+
 ## 2.1.1
 - chore: add `engines` field (`node >= 18.0.0`) and `prepublishOnly` script
 - chore: widen React peer deps to support React 18 and 19

package/README.md

@@ -36,7 +36,7 @@ npm install hazo_config
 }
 ```
 
-3. If using Tailwind v4, add the `@source` directive to `globals.css`:
+3. Add the `@source` directive to `globals.css` (Tailwind v4 is the supported peer):
 ```css
 @import "tailwindcss";
 
@@ -104,38 +104,39 @@ Add these CSS custom properties to your `globals.css` or main CSS file. These ar
 }
 ```
 
-#### Tailwind v3 Setup
+#### Tailwind v4 Setup (Required)
 
-If using Tailwind v3, ensure your `tailwind.config.js` includes:
+This package is built and tested against **Tailwind CSS v4** (declared as the only supported peer). Configure PostCSS to use the v4 plugin and import Tailwind from your CSS:
 
+`postcss.config.cjs`:
 ```js
 module.exports = {
-  content: [
-    './app/**/*.{js,ts,jsx,tsx}',
-    './components/**/*.{js,ts,jsx,tsx}',
-  ],
-  // ... rest of config
-}
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
 ```
 
-#### Tailwind v4 Setup (Critical)
-
-Tailwind v4 uses JIT compilation and only generates CSS for classes found in scanned files. By default, it only scans your project's files, NOT files in `node_modules/`. This causes all Tailwind classes in this package to have NO CSS generated.
-
-Add the following to your `globals.css` or main CSS file AFTER the tailwindcss import:
-
+`globals.css`:
 ```css
 @import "tailwindcss";
 
 /* Required: Enable Tailwind to scan hazo_config package classes */
 @source "../node_modules/hazo_config/dist";
+
+/* Required: register the dark variant used by this package */
+@custom-variant dark (&:where(.dark, .dark *));
 ```
 
-Without this directive, the components will have:
+Without the `@source` directive, the components will have:
 - Missing hover states (transparent/invisible)
 - Missing colors, spacing, and typography
 - Broken layouts
 
+> **Note:** `@tailwindcss/postcss` ships its own Lightning CSS-based prefixer, so you no longer need `autoprefixer` in your PostCSS pipeline.
+
+> **Tailwind v3 consumers:** the `peerDependencies` constraint is `tailwindcss ^4.0.0`. v3 apps can install with `--legacy-peer-deps`, but the package's dist CSS is authored against v4 conventions and is not actively tested on v3.
+
 ### Import Paths (Server/Client Separation)
 
 This package provides separate entry points for server and client code to prevent Next.js bundling errors:

package/SETUP_CHECKLIST.md

@@ -10,16 +10,37 @@ npm install hazo_config
 
 ## 2. Tailwind CSS Setup
 
-### Tailwind v4
-Add `@source` directive in your globals.css to ensure Tailwind compiles classes from the package:
+This package supports **Tailwind v4** as its only declared peer (`tailwindcss ^4.0.0`).
+
+### PostCSS plugin
+
+Use the v4 PostCSS plugin (it handles vendor prefixing internally — `autoprefixer` is no longer needed):
+
+```js
+// postcss.config.cjs
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+```
+
+### globals.css
 
 ```css
 @import "tailwindcss";
+
+/* Tailwind v4 only scans your project files by default. This directive
+   enables it to compile classes used inside the hazo_config package. */
 @source "../node_modules/hazo_config/dist";
+
+/* Register the dark variant the package's components use. */
+@custom-variant dark (&:where(.dark, .dark *));
 ```
 
-### Tailwind v3
-Add the dist directory to your `tailwind.config.js` content array:
+### Tailwind v3 (legacy)
+
+The package no longer declares v3 in `peerDependencies`. v3 consumers may install with `--legacy-peer-deps` and add the dist directory to `tailwind.config.js`:
 
 ```js
 module.exports = {
@@ -30,6 +51,8 @@ module.exports = {
 }
 ```
 
+This path is unsupported and not part of the test matrix.
+
 ## 3. CSS Custom Properties (Optional)
 
 Add these CSS variables if you want themed styling:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hazo_config",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "Config wrapper with error handling",
   "type": "module",
   "main": "dist/index.js",
@@ -13,19 +13,23 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./server": {
       "types": "./dist/server/index.d.ts",
-      "import": "./dist/server/index.js"
+      "import": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
     },
     "./components": {
       "types": "./dist/components/index.d.ts",
-      "import": "./dist/components/index.js"
+      "import": "./dist/components/index.js",
+      "default": "./dist/components/index.js"
     },
     "./lib": {
       "types": "./dist/lib/index.d.ts",
-      "import": "./dist/lib/index.js"
+      "import": "./dist/lib/index.js",
+      "default": "./dist/lib/index.js"
     }
   },
   "scripts": {
@@ -65,11 +69,11 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
+    "clsx": "^2.1.1",
     "ini": "^4.1.0",
     "lucide-react": "^0.553.0",
     "server-only": "^0.0.1",
-    "tailwind-merge": "^2.2.0"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.0.0",
@@ -81,26 +85,26 @@
     "@storybook/test": "^8.0.0",
     "@testing-library/react": "^14.3.1",
     "@types/ini": "^4.1.0",
-    "@types/node": "^20.11.0",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
+    "@types/node": "^20.14.10",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@tailwindcss/postcss": "^4.2.4",
     "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.17",
-    "hazo_connect": "^2.3.3",
+    "hazo_connect": "^2.6.0",
     "jsdom": "^24.1.3",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.49",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "storybook": "^8.0.0",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.3",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^5.7.2",
     "vite": "^6.0.0",
     "vitest": "^1.6.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {