为什么 TailwindCSS 在开发者中如此受欢迎？揭秘背后的原因！
1. 邂逅 TailwindCSS
我们平时编写 CSS 样式时，可能会用传统的方式：
<template>
<div class="zhifou">
<p>好好学习</p>
<p>天天向上</p>
</div>
</template>
<script setup></script>
<style lang="scss" scoped>
.zhifou {
margin: auto;
width: 600px;
height: 300px;
background-color: blue;
font-size: 20px;
}
</style>
然而，随着前端技术的发展，原子化 CSS 应运而生。这是一种 CSS 框架，打破了传统的样式定义方式。
在原子化 CSS 中，CSS 被拆分成更小的、独立可编辑、可复用的部分。每个原子通常表示极小的样式变化，例如颜色、大小或位置。
原子化 CSS 不仅可以减少代码量，还能提高代码的可维护性和可重用性。例如：
<div class="w-10 h-10 bg-red-100 text-10">
<p>好好学习</p>
<p>天天向上</p>
</div>
原子化 CSS 框架实际上是封装好的 CSS 工具库，像 w-[10px] 会被自动编译为 width: 10px;，从而大大减少了开发中的样式定义工作量。TailwindCSS 是其中最受欢迎的一个框架。
你可以访问 TailwindCSS 中文网 了解更多。
2. Vite 安装配置 TailwindCSS
2.1 安装 TailwindCSS
首先，使用 npm 安装 TailwindCSS 依赖：
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
第一条命令安装 TailwindCSS 的必要依赖，第二条命令生成 TailwindCSS 的配置文件，包括 postcss.config.js 和 tailwind.config.js。
2.2 配置 tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
2.3 添加 TailwindCSS 的基本指令
新建样式文件，并在 main.js 中导入该文件：
@tailwind base;
@tailwind components;
@tailwind utilities;
3. 编辑器安装 TailwindCSS 辅助插件
在使用 VSCode 编辑器时，可以安装 TailwindCSS 插件。它能提供智能提示，大大减少查阅官网文档的繁琐过程。
4. TailwindCSS 常用方法
4.1 设置宽高
- 使用
w-[ ]和h-[ ]来设置任意宽高：
<div class="bg-blue-600 w-[200px] h-[100px]">
<p>好好学习</p>
<p>天天向上</p>
</div>
- 使用
w-1/2设置宽度为父容器的一半：
<div class="bg-red-600 w-1/2">
<p>好好学习</p>
<p>天天向上</p>
</div>
- 使用
w-full和h-full占满父容器的宽高，或使用w-screen和h-screen占满整个屏幕的宽高。
4.2 设置边距和填充
- 使用
mt-*、mb-*等类来控制外边距：
<div class="bg-blue-600 w-[300px] h-[300px] mt-10 mx-auto">
<p>好好学习</p>
<p>天天向上</p>
</div>
- 使用
pt-*、px-*等类来控制内边距：
<div class="bg-blue-600 w-[300px] h-[300px]">
<p class="pt-20 px-10 bg-red-300">好好学习</p>
<p class="py-3 px-10 bg-green-400">天天向上</p>
</div>
4.3 设置边框
- 使用
border-t-*来设置边框宽度，默认 1px：
<div class="bg-blue-600 w-[300px] h-[300px] border-t-2 border-red-500">
<p>好好学习</p>
<p>天天向上</p>
</div>
- 使用
border-solid、border-dotted等设置边框样式：
<div class="bg-blue-600 w-[300px] h-[300px] border-t-2 border-dotted border-red-500">
<p>好好学习</p>
<p>天天向上</p>
</div>
4.4 其他常用方法
设置字体：如
text-[20px]设置字体大小，font-bold设置加粗。设置伪类：如
hover:bg-red-300在悬停时更改背景颜色。设置定位：如
fixed bottom-[20px]固定位置。Flex 布局：如
flex flex-row justify-center items-center实现灵活布局。
4.9 样式复用
如果多个元素的样式相同，可以通过 @layer 和 @apply 指令定义全局复用的样式：
@layer components {
.title {
@apply w-[100px] h-[100px] text-white text-[20px];
}
}
然后在 HTML 中使用复用的类名：
<p class="title">好好学习</p>
<p class="title">天天向上</p>
总结
TailwindCSS 作为一款原子化 CSS 框架，通过提供大量预定义的实用工具类，极大地提升了开发者的工作效率。它不仅减少了冗余的 CSS 代码，还让样式的维护更加简洁清晰。结合 VSCode 插件，开发者可以轻松实现快速布局和样式控制。如果你还在为如何高效管理 CSS 而烦恼，TailwindCSS 不失为一个极佳的选择。