Upgrade Tailwind

Author: morewings

eslint.config.js

@@ -1,4 +1,6 @@
 // @ts-check
+import {dirname} from 'path';
+import {fileURLToPath} from 'url';
 
 import eslint from '@eslint/js';
 import eslintTS from 'typescript-eslint';
@@ -40,6 +42,9 @@ export default [
             react: {
                 version: 'detect',
             },
+            tailwindcss: {
+                config: dirname(fileURLToPath(import.meta.url)) + '/src/lib/index.css',
+            },
         },
         plugins: {
             import: pluginImport,

package.json

@@ -66,6 +66,7 @@
     "@storybook/addon-links": "9.0.18",
     "@storybook/builder-vite": "9.0.18",
     "@storybook/react-vite": "9.0.18",
+    "@tailwindcss/postcss": "4.1.11",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@types/jest": "30.0.0",
@@ -86,7 +87,7 @@
     "eslint-plugin-react-refresh": "0.4.20",
     "eslint-plugin-ssr-friendly": "1.3.0",
     "eslint-plugin-storybook": "9.0.18",
-    "eslint-plugin-tailwindcss": "3.18.2",
+    "eslint-plugin-tailwindcss": "4.0.0-beta.0",
     "generate-react-cli": "8.4.9",
     "husky": "9.1.7",
     "identity-obj-proxy": "3.0.0",
@@ -106,7 +107,7 @@
     "stylelint-config-standard": "38.0.0",
     "stylelint-order": "7.0.0",
     "stylelint-prettier": "5.0.3",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.1.10",
     "ts-jest": "29.4.0",
     "ts-node": "10.9.2",
     "typescript": "5.8.3",
@@ -116,6 +117,7 @@
   },
   "pnpm": {
     "onlyBuiltDependencies": [
+      "@tailwindcss/oxide",
       "esbuild",
       "unrs-resolver"
     ]

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 export default {
     plugins: {
-        tailwindcss: {},
+        '@tailwindcss/postcss': {},
         'postcss-preset-env': {},
     },
 };

postcss.config.js

@@ -23,7 +23,7 @@ export const Counter: FC<Props> = ({initialValue = 0}) => {
         <div className="w-60 border border-slate-300 p-6 text-center">
             <h2 className="mb-3 text-2xl">Counter</h2>
             <button
-                className="mb-6 rounded-lg bg-teal-600 px-6 py-3 text-base text-white drop-shadow-md active:relative active:left-0.5 active:top-0.5 active:drop-shadow-none"
+                className="mb-6 rounded-lg bg-teal-600 px-6 py-3 text-base text-white drop-shadow-md active:relative active:top-0.5 active:left-0.5 active:drop-shadow-none"
                 type="button"
                 onClick={incrementCount}>
                 Increment by one

src/lib/CounterDemo/Counter.tsx

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`lib > Counter renders without crashing 1`] = `
 <DocumentFragment>
@@ -11,7 +11,7 @@ exports[`lib > Counter renders without crashing 1`] = `
       Counter
     </h2>
     <button
-      class="mb-6 rounded-lg bg-teal-600 px-6 py-3 text-base text-white drop-shadow-md active:relative active:left-0.5 active:top-0.5 active:drop-shadow-none"
+      class="mb-6 rounded-lg bg-teal-600 px-6 py-3 text-base text-white drop-shadow-md active:relative active:top-0.5 active:left-0.5 active:drop-shadow-none"
       type="button"
     >
       Increment by one

src/lib/CounterDemo/__snapshots__/Counter.spec.tsx.snap

@@ -1,3 +1 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import url("tailwindcss");