版本：VUE3 + TS 框架 vite
文章中使用tailwindcss 版本： ^3.4.17
简介： Tailwind CSS 一个CSS 框架，提供组件化的样式，直接在HTML 中编写样式，无需额外自定义CSS ，快速！ 简洁！复用！不担心命名困扰！在使用中，会自动删除未使用样式，减轻项目体积。
官网：Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网
一、安装并使用
①安装 tailwindcss
npm install -D tailwindcss@3.4.17 postcss autoprefixer // 安装 Tailwind CSS 以及相关依赖，保证完整功能
或
yarn add -D tailwindcss@3.4.17 postcss autoprefixer②创建 postcss.config.ts 和 tailwind.config.ts
在项目根目录即 src 文件夹同级目录，内容配置如下：
postcss.config.ts 配置如下
export default{plugins: {tailwindcss: {},autoprefixer: {},},
}// 如果是 js 项目则只需要修改为
module.exports ={plugins: {tailwindcss: {},autoprefixer: {},},
}tailwind.config.ts
export default{content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: []
}// 如果是 js 项目则只需要修改为
module.exports ={content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: []
}③加载 tailwind 指令
在项目的主 CSS 文件(全局css样式文件)中添加以下内容
@tailwind base;
@tailwind components;
@tailwind utilities;然后在你的 vite.config.ts 中完成以下配置
向css 的postcss的plugins 添加 tailwindcss 和 autoprefixer
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";export default defineConfig({...css: {postcss: {plugins: [tailwindcss, autoprefixer,],},},})④开始使用
tailwindcss：官网 Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网
进入官网查看样式写法
使用案例如下：
// 字体大小 16px 颜色 #000 悬浮颜色 red 内容居中 悬浮时鼠标为可点击状态
<div class="text-[16px] text-[#000] hover:text-[red] text-center cursor-pointer">文字字体设置
</div>
// 宽 150px 高50px 背景颜色 #000 且透明0.4
<div class="w-[150px] h-[50px] bg-[#000]/40"></div>二、优点详解
①快速简洁
// 快速布局 透明颜色 圆角 hover 样式 文字超出优化<div class="p-[48px] bg-[#f9f9f9] flex items-center flex-wrap"><!-- flex 布局 --><div class="w-[350px] h-[300px] p-[12px] flex justify-between items-center flex-wrap border-[1px]"><div v-for="i in 4" class="bg-[red] w-[120px] h-[120px]"></div></div><div class="w-[400px] h-[280px] bg-[#000]/10 ml-[12px]"></div> <div class="w-[280px] h-[280px] bg-[#000]/10 ml-[12px] rounded-[100%]"></div><div class="w-[280px] h-[280px] bg-[#000]/10 ml-[12px] rounded-[100%] hover:bg-[red]/10"></div><div class="w-[200px] overflow-hidden whitespace-nowrap text-ellipsis p-[12px]">文字超出优化文字超出优化文字超出优化文字超出优化</div></div>效果图：
②组件化 复用
对于常用的 CSS 样式写了之后，后面之后复制粘贴 HTML 标签即可，无需在引入 style
例如 遮罩层样式：
<!-- 外部盒子 --><div class="w-[350px] h-[350px]"><!-- 图片遮罩层 --><div class="relative w-full h-full hover cursor-pointer"><imgsrc="https://picsum.photos/200/300"class="w-full h-full object-cover"/><divclass="w-full h-full absolute bg-[#000] top-0 opacity-0 hover:opacity-80 flex justify-center items-center"><p class="text-[18px] text-[#409EFF] font-semibold">查看详情</p></div></div></div>
效果如下：
样式定义完成之后，后面使用时，直接可进行复用
总结：使用 tailwindcss 可进行样式组件化，直接在HTML 中编写样式，无需额外自定义CSS 可以快速简洁的完成页面的样式构造 ，且不用考虑类名重复问题，支持 过渡 悬浮 透明 flex 布局 排版等样式排版功能，完善切强大，省去了传统 CSS 的选择器嵌套、样式覆盖、BEM 命名等繁琐的步骤，针对日常开发需求可减少大量编写css样式的时间，提高开发效率。