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

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

1. 安装tawincss、postcss和autoprefix

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

2. 更新您的trawind.config.js

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

3. 更新postcss.config.js

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

4. 创建资源/css/trawind.css

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

5. 更新nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

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

6. 在app.vue中导入您的CSS。(可选)在以前的版本中，他们建议我们在app.vue而不是nuxt.config中导入tawincss

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