Nuxtjs v3 和 Tailwindcss v3 PostCSS@8 不兼容

mar*_*ndt 23

目前，本文档tailwindcss./docs/guides/nuxtjs仅适用于 nuxtjs v2，但如果您遵循本指南，仍然可以使用 v3：

目前不要使用@nuxt/postcss8它仅适用于 nuxtjs v2

安装 tailwindcss、postcss 和 autoprefixer

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

更新您的 tailwind.config.js

module.exports = {
  content: [
    './assets/**/*.{vue,js,css}',
    './ponents/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  variants: {
    extend: {},
  },
  plugins: [],
};

更新你的 postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

创建资产/css/tailwind.css

@tailwind base;
@tailwind ponents;
@tailwind utilities;

更新你的 nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// v3.nuxtjs./docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  css: ['~/assets/css/tailwind.css'],
  build: {
    postcss: {
      postcssOptions: require('./postcss.config.js'),
    },
  }
})

将您的 css 导入app.vue. （可选）在以前的版本中，他们建议我们在 app.vue 而不是 nuxt.config 中导入 tailwindcss

<script setup>
import '@/assets/css/tailwind.css'
</script>

刚刚测试不工作：s (4认同) 我测试它的工作！谢谢~ (2认同)

Sea*_*Hay 8

我也遇到了这个问题，因为 Nuxt 3 需要一种不同的方式来集成 Tailwind。以下是将 Tailwind 作为 Nuxt 模块安装，而不是单独安装。这更容易，因为它需要的配置少得多（无需编辑postcss.config.js ， nuxt.config.js所需的配置少一点）。

Nuxt Tailwind 模块 5.0 版本引入了对 Nuxt 3 的支持。完整的默认安装如下：

步骤1

要安装，我们可以使用@nuxtjs/tailwindcss@latest或您需要的任何版本（5.1 之后）进行开发安装（yarn add 或 npm install） 。

 yarn add -D @nuxtjs/tailwindcss@latest

第2步

然后在nuxt.config.js中，将模块添加到模块数组中：

import { defineNuxtConfig } from "nuxt"

export default defineNuxtConfig({
    modules: [
        '@nuxtjs/tailwindcss'
    ]
})

第 3 步

手动或使用终端命令创建tailwind.config.js文件：

npx tailwindcss init

第4步

将 Tailwind 指令添加到您的主 CSS 文件（默认为 ./assets/css/tailwind.css，或在您的nuxt.config.js文件中配置）。

@tailwind base;
@tailwind ponents;
@tailwind utilities;

第 5 步

在此之后，尝试运行您的开发或构建命令，它应该可以正常工作。