Início / coding / Perguntas / 79591709
Accepted
shan zi
Asked: 2025-04-25 10:27:24 +0800 CST

Tailwind@4 não pode ser usado no Storybook@8

  • 772

Criei um novo projeto vue3 + Vite, Storybook.

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

e instale estes pacotes 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.

No entanto, o tailwindcss não funciona nos meus componentes. O que posso fazer? É a primeira vez que uso o Storybook e uso o [email protected]

vuejs3

1 respostas

  1. Best Answer

    TailwindCSS v4 com PostCSS

    Conforme mencionado na documentação oficial do TailwindCSS, você precisa usar um arquivo de configuração modular. Use postcss.config.mjsem vez de postcss.config.js.

    TailwindCSS v4 com Vite

    Embora não esteja diretamente relacionado à pergunta, é uma informação útil: se você estiver usando o Vite, a partir do TailwindCSS v4, você tem a opção de instalar o TailwindCSS diretamente integrado ao Vite sem usar o PostCSS.

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

    O postcss.config.(m)jsarquivo não é mais necessário e pode ser excluído. Em vez disso, você precisa adicionar o seguinte a vite.config.js:

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

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

    Módulo

    Não entendi bem a pergunta - a parte do tipo de módulo -, mas é recomendável adicioná-la "type": "module"ao seu arquivo package.json. O TailwindCSS v4 não funcionará em pacotes que não sejam módulos. Este é o futuro.

    • 0

relate perguntas