vuejs3tailwind-cssvitestorybookpostcss

Tailwind@4 can no able in Storybook@8

I have created a new vue3 + Vite, Storybook project.

"@storybook/vue3": "^8.6.12",
"@storybook/vue3-vite": "^8.6.12",
"vite": "^6.2.0",

and install these npm package:

"@storybook/addon-postcss": "^2.0.0",
"@tailwindcss/postcss": "^4.1.4",
"postcss": "^8.5.3",
"tailwindcss": "^4.1.4",

// and edit .storybook/main.ts
addons: [
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    }
]

// and edit .storybook/preview.ts
+ import '../packages/style/tailwindcss.css'

/* content of the packages/style/tailwindcss.css  */
@import "tailwindcss";

// add the postcss.config.js
module.exports = {
    plugins: {
        '@tailwindcss/postcss': {},
        // autoprefixer: {}
        // require('postcss-color-rebeccapurple'),
    }
}

// edit package.json
  - "type": "module"
  
Why delete this line?

Failed to load PostCSS config (searchPath: /Users/lifaqi/noliebe/tool-cabinet): [ReferenceError] module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/lifaqi/noliebe/tool-cabinet/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
ReferenceError: module is not defined in ES module scope
This file is being treated as an ES module because it has a '.js' file extension and '/Users/lifaqi/noliebe/tool-cabinet/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/lifaqi/noliebe/tool-cabinet/postcss.config.js?t=1745546527838:1:1
    at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
    at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:578:26)
    at async req$3 (file:///Users/lifaqi/noliebe/tool-cabinet/node_modules/.pnpm/vite@6.2.1_@types+node@22.13.10_jiti@2.4.2_lightningcss@1.29.2_terser@5.39.0/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:14751:13)
    at async Object.search (file:///Users/lifaqi/noliebe/tool-cabinet/node_modules/.pnpm/vite@6.2.1_@types+node@22.13.10_jiti@2.4.2_lightningcss@1.29.2_terser@5.39.0/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:14493:23)

so i delete them, run stoybook, and is clear.

However, the tailwindcss cannot work on my components. what can i do, this is my first time using Storybook. and i use node@22.14.0

Solution

  • TailwindCSS v4 with PostCSS

    As mentioned in the official TailwindCSS documentation, you need to use a modular configuration file. Use postcss.config.mjs instead of postcss.config.js.

    TailwindCSS v4 with Vite

    Although it's not directly related to the question, it's a useful piece of information: If you're using Vite, starting from TailwindCSS v4, you have the option to install TailwindCSS directly integrated into Vite without using PostCSS.

    npm uninstall postcss @tailwindcss/postcss
npm install tailwindcss @tailwindcss/vite

    The postcss.config.(m)js file is no longer needed and can be deleted. Instead, you need to add the following to vite.config.js:

    import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    vue(),
  ],
})

    Module

    I don't quite understand the question - the module type part -, but it's recommended to add "type": "module" to your package.json. TailwindCSS v4 won't work in non-module packages. This is the future.