如何在Nuxt 4中安装和使用Tailwind CSS？

以下是适配Nuxt 4最新版本的Tailwind CSS配置步骤：

• 安装依赖包
  执行以下命令安装Tailwind CSS及相关工具：

  npm install tailwindcss postcss autoprefixer --save-dev
  

• 初始化配置文件
  运行指令生成Tailwind和PostCSS的配置文件：

  npx tailwindcss init -p
  

• 配置内容扫描路径
  修改生成的tailwind.config.js，指定Nuxt项目中需要应用Tailwind样式的文件路径：

  /** @type {import('tailwindcss').Config} */
  export default {
    content: [
      "./components/**/*.{js,vue,ts}",
      "./layouts/**/*.vue",
      "./pages/**/*.vue",
      "./plugins/**/*.{js,ts}",
      "./app.vue",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 配置Nuxt的PostCSS
  在nuxt.config.ts中添加PostCSS插件配置，启用Tailwind和Autoprefixer：

  export default defineNuxtConfig({
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    },
  })
  

• 创建全局样式文件
  在assets/css目录下创建tailwind.css文件，写入Tailwind的核心指令：

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

• 引入全局样式到Nuxt
  修改nuxt.config.ts，将全局样式文件添加到CSS配置项中：

  export default defineNuxtConfig({
    css: ['~/assets/css/tailwind.css'],
    postcss: {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      },
    },
  })
  

完成以上步骤后，即可在Nuxt 4项目中正常使用Tailwind CSS的所有功能。

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