如何在Nuxt3 Starter中手动配置TailwindCSS？（附官方模块支持更新）

嘿，我来帮你搞定这个问题！你目前的配置只引入了Tailwind的基础CSS文件，但没让Nuxt3的PostCSS工具链去编译那些@tailwind指令，所以才会看到未编译的原始代码。下面是完整的手动配置步骤，以及补充说明现在官方模块已经支持Nuxt3的便捷方案：

一、手动配置TailwindCSS（不使用模块） #

1. 确认已完成的基础步骤 #

你已经完成了这部分操作，这里再做下核对：

• 创建Nuxt3项目：npx degit "nuxt/starter#v3" my-nuxt3-project
• 安装依赖：npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
• 在nuxt.config.ts中引入Tailwind CSS文件：

export default defineNuxtConfig({
  css: ['~/assets/tailwind.css']
})

• 在assets/tailwind.css中写入Tailwind核心指令：

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

2. 生成并配置Tailwind配置文件 #

运行命令生成Tailwind的配置文件：

npx tailwindcss init

打开生成的tailwind.config.js，修改content字段，让Tailwind能扫描到Nuxt3项目里的所有页面、组件文件（保证样式按需生成）：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. 配置PostCSS #

在项目根目录创建postcss.config.js文件，告诉Nuxt3用PostCSS处理Tailwind和自动前缀：

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

4. 测试配置效果 #

在app.vue里添加一个带Tailwind样式的元素，比如：

<template>
  <div class="container mx-auto mt-8">
    <h1 class="text-3xl font-bold text-red-500">TailwindCSS 生效啦！</h1>
  </div>
</template>

运行npm run dev，打开页面就能看到样式正常渲染了。

二、更便捷的方案：使用@nuxtjs/tailwindcss模块 #

你之前以为这个模块只适配Nuxt2，其实现在它已经完全支持Nuxt3了，用模块能省去手动配置PostCSS的步骤：

1. 安装模块：

npm install -D @nuxtjs/tailwindcss

2. 在nuxt.config.ts中注册模块：

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

3. （可选）自定义Tailwind配置
   同样可以运行npx tailwindcss init生成配置文件，模块会自动识别它，你可以按需修改主题、插件等配置。

这样启动项目后，Tailwind就会自动生效，不用手动引入tailwind.css文件（模块会帮你处理），当然如果你想自定义CSS入口，也可以在配置里指定路径。

内容的提问来源于stack exchange，提问作者DengSihan