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',
    ]
}

assets/tailwind.css

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

但我只能获取原始代码，而不能获取编译后的 css：

如何在 Nuxt3 中使用 tailwindcss？

非常感谢任何帮助！

---

online mini demo

Answer 1

也许您的问题是因为您需要tailwindcss.config.js。

为此，只需在控制台中输入：

yarn run tailwindcss init

Answer 2

如果您想将 Tailwind 与 Nuxt 3 一起使用，您可以使用 Windi CSS，或者如果您想使用实际的 Tailwind，您可以按照此 video 中的说明进行操作。我仍然会推荐 Windi CSS，因为它使用与 Tailwind CSS 相同的语法，并且与 Nuxt 3 配合得很好，而且还有一些独特的功能（例如 WindiCSS Analyzer）。此外，Nuxt 专门赞助了该项目，而且速度要快得多。或者，如果您对两者都不满意，也可以试试UnoCSS，它比 Windi 和 Tailwind 还要快（不过，它仍处于测试阶段）。

您可以查看每种 CSS 类型的基准here。

Answer 3

使用 Windi CSS 很棒，我自己也在尝试，但它只与 Tailwind CSS 的第 2 版兼容，与新的第 3 版不兼容。所以，如果你想使用 Tailwind CSS v3，它是Nuxt3 项目中的新功能，您可以按照question 的答案中提供的说明进行操作。

Answer 4

由于接受的答案可能会产生误导，就好像 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: {},
                   },
               },
           },
   }
   
   

还可以在 nuxt.config.js 中配置您的 tailwind.css 文件位置 通过添加：

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}",
  ],

Answer 5

1. yarn add postcss && tailwindcss

2. 将tailwind.config.js 添加到您的目录。

3. 更新您的 nuxt.config.ts：

   css: ['~/assets/styles/tailwind.css'],
   build: {
       postcss: {
           postcssOptions: {
               plugins: {
                   tailwindcss: {},
                   autoprefixer: {}
               }
           }
       }
   },
   

4. 在样式中创建tailwind.css并添加：

   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';
   

5. yarn dev