Nuxt3：如何使用tailwindcss

Posted 2023-03-06

【中文标题】Nuxt3：如何使用tailwindcss

【英文标题】：Nuxt3: how to use tailwindcss

【发布时间】：2021-11-05 22:04:48

【问题描述】：

首先通过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

【问题讨论】：

postcss 也可能有一些配置？ tailwindcss.com/docs/…

@kissu 非常感谢！我使用默认的postcss.config.js，但是我发现它从来没有运行过。

查看tailwind css官方文档tailwindcss.com/docs/guides/nuxtjs

【参考方案1】：

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

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

yarn run tailwindcss init

【参考方案2】：

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

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

【讨论】：

非常感谢您的回答！这个问题是一个月前nuxt3内测时问的，现在nuxt3支持tailwindcss。

这不应该被接受，因为它已经过时了，Nuxt3 支持 TailwindCSS 就好了。

实际上，从技术上讲，Nuxt 3 - https://modules.nuxtjs.org/?version=3.x 不支持 Tailwind CSS，但是 WindiCSS 支持。

@23johanningmeierjl，怎么不支持？我在我的 Nuxt3 项目中使用它很好，没有任何问题。您根本不需要 Tailwind 模块。它只需要在构建参数中的nuxt.config.js中进行配置。

@SamAxe，我想我已经澄清了。我觉得视频提供了一个更好的例子来说明如何做到这一点。 （就个人而言，我是一个视觉学习者）。我还保留了 Windi CSS（我必须推荐它）和 UnoCSS 的想法。我包含的基准测试也很有用。我希望这会更好。

【参考方案3】：

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

【讨论】：

不像 Tailwind3 那样有什么大不了的。您可以随时要求支持 Windi 项目的某些功能。

特别是这个：twitter.com/windi_css/status/…

【参考方案4】：

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

通过运行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",
  ],

【参考方案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