nuxt3 项目使用 tailwind css（安装、配置、插件）_nuxt3 tailwindcss-爱代码爱编程
目录
构建
# 安装 tailwindcss
安装 @nuxtjs/tailwindcss 依赖到你的项目
# 方式1：nuxi
npx nuxi@latest module add tailwindcss
# 方式2：yarn
yarn add -D @nuxtjs/tailwindcss
# 方式3：npm
npm install -D @nuxtjs/tailwindcss
# 方式4：pnpm
pnpm i -D @nuxtjs/tailwindcss
# nuxt.config配置
如果按以上2、3、4中的一种方式安装的，则需要将其添加到next .config中的模块部分:
# nuxt3
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss']
})
# 版本
安装完成查看 package.json
{
"devDependencies": {
"@nuxtjs/tailwindcss": "^6.11.4",
}
}使用
# 编写
新建 test.vue 文件，复制以下代码加入到页面
<template>
<div class="h-full flex p-96 justify-center items-center">
<div class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">Hello Tailwind CSS</div>
</div>
</template># 效果
浏览器中查看实现效果：
类名联想
# 预期效果图
来自官网实现效果图
# vscode 安装插件
官方的 Tailwind CSS IntelliSense 扩展，为 Visual Studio Code 增强了 Tailwind 开发体验，为用户提供了高级功能，如自动完成，语法高亮和检查。
# 激活拓展
为了使扩展激活，您必须安装 tailwindcss 和 创建一个名为 tailwind.config.{js,cjs,mjs,ts} 的 Tailwind 配置文件。
创建 tailwind.config.ts 文件：
# tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./pages/**/*.{vue,ts}"],
theme: {
extend: {}
},
plugins: []
};
# 达到预期效果
在类名中，可以输入 tailwindcss 内置类名， 则会出现类名联想，如输入 rounded 实现你的圆角样式 :
类名排序
# 预期效果图
来自官网实现效果图
# 安装Prettier
为了能够在nuxt3正常使用，我们安装 prettier-plugin-tailwindcss：v0.5.x版本
prettier-plugin-tailwindcss从v0.5开始，这个插件现在需要 prettier v3支持，并且只支持esm。这意味着它不能通过require()加载。安装命令：
# prettier:v3
# prettier-plugin-tailwindcss:v0.5.x
npm install -D prettier prettier-plugin-tailwindcss安装完成，查看 package.json
"devDependencies": {
"@nuxtjs/tailwindcss": "^6.11.4",
"prettier": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.5.14",
},# prettier配置
你可以按照 nuxt3 官网说明，使用.prettierrc.json文件进行配置。
这里 是以 .prettierrc.yaml 做示例。
我之前写过一篇关于.prettier 的文章，有兴趣的可以前往阅读：http://t.csdnimg.cn/NWTXR
# prettier.yaml
# 一个 Tailwind CSS 的 Prettier 插件，它根据我们推荐的类顺序自动对类进行排序
plugins: ["prettier-plugin-tailwindcss"]
# 达到预期效果
文件未保存之前
<!-- Before -->
<button class="text-white px-4 sm:px-8 py-2 sm:py-3 bg-sky-700 hover:bg-sky-800">...</button>文件保存之后
<!-- After -->
<button class="bg-sky-700 px-4 py-2 text-white hover:bg-sky-800 sm:px-8 sm:py-3">...</button>如果没有效果，记得重启你的 Visual Studio Code 应用。
非标准属性排序
# 自定义类名接收属性
默认情况下，这个插件只对class属性中的类以及任何特定于框架的等价类(如class、className、:class、[ngClass]等)进行排序。
你可以使用 tailwindatattributes 选项对其他属性进行排序，该选项接受一个属性名称数组:
// .prettierrc.yaml
{
"tailwindAttributes": ["myClassList"]
}# 达到预期效果
保存之前
# test.vue
<!-- Before -->
<button myClassList="rounded bg-blue-500 px-4 py-2 text-base text-white flex">Click</button>
保存之后
# test.vue
<!-- After -->
<button myClassList="flex rounded bg-blue-500 px-4 py-2 text-base text-white">Click</button>自定义前缀
如果你的现有样式和Tailwind实例样式存在冲突时，可以配置前缀选项来解决冲突。只需要在配置文件中添加以下配置：
# 配置
/** @type {import('tailwindcss').Config} */
module.exports = {
prefix: "vinca-"
};
# 达到预期效果
# 注意事项
要理解这个前缀是添加在任何变体修饰符之后的。
这意味着具有响应式或状态修饰符(如sm:或hover:)的类仍将首先具有响应式或状态修饰符，并在冒号之后显示自定义前缀:
<div class="vinca-text-lg md:vinca-text-xl vinca-bg-red-500 hover:vinca-bg-blue-500">
<!-- -->
</div>