Nuxt3：如何使用tailwindcss

Question

首次尝试 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

如果你想在 Nuxt 3 中使用 Tailwind，你可以使用 Windi CSS or you can follow the instructions in this video if you want to use the actual Tailwind. I would still recommend Windi CSS as it uses the same syntax as Tailwind CSS and works great with Nuxt 3, plus has a few unique features (such as the WindiCSS Analyzer). Also, Nuxt specifically sponsors the project, and it's a lot faster. Or, if you are unsatisfied with both, you could also try UnoCSS，它甚至比 Windi 和 Tailwind 更快（但是，它仍处于测试阶段）。

您可以查看每个 CSS 类型的基准测试 here。

Answer 3

使用 Windi CSS 很棒，我正在自己尝试一下，但它只与 Tailwind CSS 的第 2 版兼容，而不与新的第 3 版兼容。所以，如果您想在 Nuxt3 项目中使用 Tailwind CSS v3 和它的新功能，您可以按照此 .

的答案中提供的说明进行操作

Answer 4

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

安装依赖运行ning npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
运行 npx tailwindcss init 创建 tailwind.config.js 文件

在构建时将 nuxt.config.js 构建设置配置为运行 postcss：

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

还要在 nuxt.config.js 中配置您的 tailwind.css 文件位置添加：

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

填充您的 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

yarn add postcss && tailwindcss
将 tailwind.config.js 添加到您的目录。

将您的 nuxt.config.ts 更新为：

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

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

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

yarn dev

Nuxt3：如何使用tailwindcss

Nuxt3: how to use tailwindcss

nuxt.js

tailwind-css

unocss