Vue3项目中引入TailwindCSS（图文详情）

Vue3项目中引入TailwindCSS（图文详细）

Tailwind CSS 是一个实用工具优先的 CSS 框架，提供丰富的低级类（如 text-center、bg-blue-500），允许开发者通过组合这些类快速构建自定义设计，而无需编写大量自定义 CSS。它高度可定制，支持响应式设计、暗模式和插件扩展，提升开发效率和代码可维护性。Tailwind 的模块化类名减少了样式冲突，简化了团队协作，并且可以通过配置文件轻松调整主题和样式。广泛应用于现代前端项目中，特别适合需要灵活设计和快速迭代的开发场景。

文章目录

1.安装引入测试

首先确保已经使用vite创建了一个vue3可用的项目工程，如果还没有请参考文章：
Vite创建Vue3工程并引入ElementPlus（图文详细）

打开TailWindcss官网：https://tailwind.nodejs.cn/docs/installation

进入安装里点击框架指南找到vite

进去后点击vue框架

打开项目工程终端根目录，安装tailwindcss

npm install -D tailwindcss postcss autoprefixer

初始化生成tailwindcss配置文件

npx tailwindcss init -p

修改配置文件tailwind.config.js

js 复制代码

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改根目录下生成的style.css文件（如果没有生成，此文件使用vite创建工程会附带）

css 复制代码

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

设置vscode忽略未知的规则，消除@警告

设置完毕后波浪线消失

App.vue文件加入测试代码

vue 复制代码

<template>
	<h1 class="text-3xl font-bold underline">Hello world!</h1>
</template>

<script setup></script>

<style lang="scss" scoped></style>

启动运行项目工程

npm run dev

打开对应的地址可在浏览器看到如下效果，成功的话字体下方会有下划线

2.Tailwindcss插件代码提示与样式预览

在vscode搜索并安装插件

安装插件重启后，当鼠标悬停在对应的Tailwindcss样式类上会显示对应的css样式

当输入相关的tailwindcss时会出现代码提示（如果没出现相关提示则按alit+/快捷键）

3.Tailwindcss顺序格式化工具安装

在我们实际前端项目实际开发中，引入原子化样式库后，很容易出现样式顺序不统一问题，尤其是在多人项目中这一点特别明显具体为，同一个样式效果，引入的原子化样式不一致，导致代码可读性非常差，造成不便于团队协作项目开发和代码可维护性低，具体如下

以上代码样式显示效果完全相同，但是由于个人引入原子化样式库习惯问题导致顺序不一致，使得代码可读性变差

我们期望的结果为样式统一顺序

要想实现以上顺序统一的效果，那么需要引入一个prettier-plugin-tailwindcss

项目根目录安装依赖

npm install -D prettier-plugin-tailwindcss

.prettierrc文件引入插件

json 复制代码

"plugins": ["prettier-plugin-tailwindcss"]

这样在使用prettier时，使用对应的TailWindcss的样式将会统一进行排序，实现我们想要的效果

注意：如果保存时自动进行prettier格式化需要先对prettier进行配置参考以下文章：
VScode中配置ESlint+Prettier详细步骤（图文详情）