tailwindcss 前端 css 框架无需写css 快速构建页面

版本：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样式的时间，提高开发效率。