主页 / coding / 问题 / 79591709
Accepted
shan zi
Asked: 2025-04-25 10:27:24 +0800 CST

Tailwind@4 无法在 Storybook@8 中使用

  • 772

我创建了一个新的 vue3 + Vite，Storybook 项目。

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

并安装这些 npm 包：

"@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/[email protected]_@[email protected][email protected][email protected][email protected]/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/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/vite/dist/node/chunks/dep-glQox-ep.js:14493:23)

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

但是 tailwindcss 无法在我的组件上运行。我该怎么办？这是我第一次使用 Storybook。我使用[email protected]

vuejs3

1 个回答

  1. Best Answer

    TailwindCSS v4 与 PostCSS

    正如 TailwindCSS 官方文档中所述，您需要使用模块化配置文件。使用postcss.config.mjs而不是postcss.config.js。

    TailwindCSS v4 与 Vite

    虽然它与问题没有直接关系，但它是一个有用的信息：如果您使用 Vite，从 TailwindCSS v4 开始，您可以选择将 TailwindCSS 直接集成到 Vite 中，而无需使用 PostCSS。

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

    该postcss.config.(m)js文件不再需要，可以删除。相反，您需要将以下内容添加到vite.config.js：

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

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

    模块

    我不太明白这个问题——模块类型部分——但建议将其添加"type": "module"到你的package.json。TailwindCSS v4 无法在非模块包中运行。这是未来。

    • 0

相关问题