Nuxt3 项目使用 Tailwind CSS（安装、配置、插件）

目录

构建

# 安装 tailwindcss

# nuxt.config配置

# 版本

使用

# 编写

# 效果

类名联想

# 预期效果图

# vscode 安装插件

# 激活拓展

# 达到预期效果

类名排序

# 预期效果图

# 安装Prettier

# prettier配置

# 达到预期效果

非标准属性排序

# 自定义类名接收属性

# 达到预期效果

自定义前缀

# 配置 

# 达到预期效果

# 注意事项

---

 

构建

# 安装 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>

---