Nuxt3:如何使用尾风

Question

第一次尝试在Nuxt3上通过Nuxt3起动器

我想知道如何手动使用Nuxt3启动器中的尾风。

(不是通过@nuxtjs/尾风，因为它是针对Nuxt2的，而不是使用Nuxt3的。)

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

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

然后，我手动安装了尾风车。

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中使用尾风？

任何帮助都是非常感谢的！

在线迷你演示

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： 生成：{ postcss：{ postcssOptions：{ plugins：{ tailwindcss：{}，自动重定位器：{}，}

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

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

1. 填充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 2

1. yarn add postcss && tailwindcss
2. 将tailwind.config.js添加到您的目录。
3. 使用以下内容更新您的nuxt.config.ts： css：‘~/资产/样式/终结者.css’，构建：{ postcss：{ postcssOptions：{ plugins：{ tailwindcss：{}，自动重新定位器：{ }，
4. 在样式中创建tailwind.css并添加： “进口”；“进口”；
5. yarn dev

Answer 3

我做了一个完全配置的nuxt 3“初学者-工具包”，支持TypeScript和一些被认为是有用的库，完全配置并准备在实际项目中使用: TypeScript、Tailwind、Sass、Storybook、Vitest & Pinia。我昨天刚推了一下-应该准备好用.

也许它会对某人有所帮助：https://github.com/lazercaveman/nuxt3-starter :)