官方文档：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>
