Nuxt3：如何使用tailwindcss

Question

通过Nuxt3 Starter首次尝试 Nuxt3

我想知道如何在 Nuxt3 Starter 中手动使用 tailwindcss 。

（不是通过@nuxtjs/tailwindcss，因为它适用于 Nuxt2，不适用于 Nuxt3。）

我创建了一个空白的 Nuxt3 项目

npx degit "nuxt/starter#v3" my-nuxt3-project

然后，我手动安装了 tailwindcss

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

nuxt.config.ts

export default {
    css: [
        '~/assets/tailwind.css',
    ]
}

资产/tailwind.css

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

但我只能得到原始代码，但不能得到编译后的CSS：

如何在 Nuxt3 中使用 tailwindcss？

任何帮助是极大的赞赏！

---

在线迷你演示

---

更新：

Nuxt3 已经支持@nuxtjs/tailwindcss

基本示例

Answer 1

由于接受的答案可能会产生误导，就好像 Nuxt 3 不支持 Tailwind 一样，因此您需要执行以下操作才能使其正常工作：

1. 通过运行安装依赖项npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

2. 运行npx tailwindcss init创建tailwind.config.js文件

3. 配置nuxt.config.js构建设置以在构建时运行 postcss：

   build: {
           postcss: {
               postcssOptions: {
                   plugins: {
                       tailwindcss: {},
                       autoprefixer: {},
                   },
               },
           },
   }
   
   

还可以通过添加以下内容来配置 tailwind.css 文件位置nuxt.config.js ：

css: ["~/assets/css/tailwind.css"]

4. 填充您的tailwind.css文件

@tailwind base;
@tailwind components;
@tailwind utilities;

应该是这样。

编辑：

另外，请确保包含以下内容tailwind.config.js

content: [
    "./components/**/*.{vue,js}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],

编辑2：

请参阅 Tailwind CSS 网站上的最新文档 https://tailwindcss.com/docs/guides/nuxtjs#3