Nuxt 3 项目中配置 Tailwind CSS

官方文档：https://www.tailwindcss.cn/docs/guides/nuxtjs#standard

安装 Tailwind CSS 及其相关依赖

执行如下命令，在 Nuxt 项目中安装 Tailwind CSS 及其相关依赖

npm install -D tailwindcss postcss autoprefixer

pnpm install -D tailwindcss postcss autoprefixer

生成 Tailwind CSS 配置文件

执行如下命令，在 Nuxt 项目中生成 Tailwind CSS 配置文件

npx tailwindcss init

对于生成的 Tailwind CSS 配置文件中内容的相关说明

/** @type {import('tailwindcss').Config} */
export default {
  // 配置 Tailwind CSS 在哪些路径下的文件中生效
  content: [],
  // 配置 Tailwind CSS 主题
  theme: {
    extend: {},
  },
  // 配置 Tailwind CSS 插件
  plugins: [],
}

修改 Nuxt 配置文件 nuxt.config.ts

在 Nuxt 配置文件 nuxt.config.ts 中配置使用 PostCSS 对项目中的 CSS 样式代码进行语法分析，并为 PostCSS 配置 Tailwind CSS 相关插件

PostCSS 是一种 JavaScript 工具，可将我们的 CSS 代码转换为抽象语法树 (AST)，然后提供相关的 API（应用程序编程接口）让 JavaScript 插件能够对 PostCSS 将 CSS 代码转换出来的抽象语法树 (AST) 进行分析和修改。

// https://nuxt.com/docs/api/configuration/nuxt-config
// ...

export default defineNuxtConfig({
  devtools: { enabled: true },
  // ...
  // PostCSS 可将我们的 CSS 代码转换为抽象语法树 (AST)，
  // 以供其他插件能够据此对 CSS 代码进行分析和修改
  postcss: {
    // 配置 PostCSS 插件
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  // ...
})

配置 Tailwind CSS

在 Tailwind CSS 配置文件 tailwind.config.js 中，配置 Tailwind CSS 在哪些文件中可以生效和使用

/** @type {import('tailwindcss').Config} */
export default {
  // 配置 Tailwind CSS 在哪些路径下的文件中生效
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue',
    './error.vue',
  ],
  // 配置 Tailwind CSS 主题
  theme: {
    extend: {},
  },
  // 配置 Tailwind CSS 插件
  plugins: [],
}

添加 Tailwind CSS 指令到项目中

在项目根目录下的 assets/styles/tailwind.scss 文件中，编写如下内容：

这里使用 sass 是因为我的项目中配置了 sass，可以根据项目选择

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

然后再 Nuxt 配置文件中，通过配置将 assets/styles/tailwind.scss 文件中的内容添加到全局，即为每个 CSS 样式表导入 Tailwind CSS 指令

// https://nuxt.com/docs/api/configuration/nuxt-config
// 运行或构建项目时，能够自动执行 ESLint 代码检查和修复的插件
import eslint from 'vite-plugin-eslint'

export default defineNuxtConfig({
  devtools: { enabled: true },
  // ...
  // 定义要全局的 CSS 文件/模块/库，即为每个 CSS 样式表导入
  css: ['~/assets/styles/tailwind.scss'],
  // PostCSS 可将我们的 CSS 代码转换为抽象语法树 (AST)，
  // 以供其他插件能够据此对 CSS 代码进行分析和修改
  postcss: {
    // ...
  },
  // ...
})

使用 Tailwind CSS

这里只是测试配置是否正确可用，更多 Tailwind CSS 用法可以参考官网：https://www.tailwindcss.cn/

<template>
  <div class="bg-amber-500">
    <!-- 页面占位 -->
    <NuxtPage />
  </div>
</template>

<script setup></script>