我们平时写 css 样式是这样的：
<template><divclass="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 组件被拆分为更小的部分，这些部分可以独立地编辑、测试和重用。这些原子通常是单个像素或极其微小的变化，例如颜色、大小、位置等。
原子化 CSS 有助于减少代码量，提高代码的可维护性和可重用性。
原子化 CSS 写法：
<divclass="w-10 h-10 bg-red-100 text-10"><p>好好学习</p><p>天天向上</p></div>
原子化 CSS 框架更像是一个已经封装好的 CSS 工具类。
例如：我们在类选择器中写了 w-[10px]，原子化 CSS 框架经过扫描，将 w-[10px] 扫描成
width:10px;
也就是说，我们只要按照这个框架的要求去任意组合，框架最后一扫描，就能生成我们想要的 CSS 样式。这样会大大减少代码量，提高工作效率。
而本文介绍的 tailwindcss 就是市面上非常热门的原子化 CSS 框架。
tailwindcss 中文网
https://www.tailwindcss.cn/
图片
npm install-D tailwindcss postcss autoprefixer npx tailwindcss init-p
其中第一行命令会安装 tailwindcss 的依赖
第二行命令会创建 tailwindcss 配置文件，包含 postcss.config.js 和 tailwind.config.js 文件。
postcss.config.js 主要用来给项目中添加 tailwindcss 的插件。
图片
tailwind.config.js 主要用来配置 tailwindcss 的扫描规则、设置主题等。
图片
图片
/** @type {import('tailwindcss').Config} */exportdefault{
content:["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {
extend: {},},plugins:[],}
新建样式文件，在 main.js 中导入该文件
@tailwindbase;@tailwindcomponents;@tailwindutilities;
图片
图片
这里我们使用的编辑器是 VScode。
新手刚开始用 tailwindcss 时，需要不断从官网查询相关原子类的写法，这样太繁琐。
安装插件之后，编辑器就能智能提示了，非常的方便
图片
图片
<template><div><divclass="bg-blue-600 w-[200px] h-[100px]"><p>好好学习</p><p>天天向上</p></div><divclass="bg-red-600 w-[20rem] h-[10rem]"><p>好好学习</p><p>天天向上</p></div></div></template><script setup></script><style lang="scss"scoped></style>
图片
<divclass="bg-red-600 w-1/2"><p>好好学习</p><p>天天向上</p></div>
w-full：占满父容器的宽度
h-full：占满父容器的高度
w-screen：占满整个屏幕的宽度
h-screen：占满整个屏幕的高度
<template><divclass="w-[400px]"><divclass="bg-red-600 w-full"><p>好好学习</p><p>天天向上</p></div><divclass="bg-blue-600 w-screen"><p>好好学习</p><p>天天向上</p></div></div></template><script setup></script><style lang="scss"scoped></style>
图片
设置最小最大宽度：min-w-[]、max-w-[]
设置最小最大高度：min-h-[]、max-h-[]
<divclass="w-[400px]"><divclass="bg-red-600 w-full min-w-[200px] min-h-[500px]"><p>好好学习</p><p>天天向上</p></div><divclass="bg-blue-600 w-screen max-w-[100px] max-h-[300px]"><p>好好学习</p><p>天天向上</p></div></div>
1.margin
mt-* : margin-top
mb-* : margin-bottom
ml-* : margin-left
mr-* : margin-right
mx-* : margin-left, margin-right;
my-* : margin-top, margin-bottom;
mx-auto : margin: 0 auto;
<div class="bg-red-600 w-[100px] h-[100px]"> <p>好好学习</p> <p>天天向上</p> </div> <div class="bg-blue-600 w-[300px] h-[300px] mt-20px mx-auto"> <p>好好学习</p> <p>天天向上</p> </div>
图片
2.padding
pt-* : padding-top
pb-* : padding-bottom
pl-* : padding-left
pr-* : padding-right
px-* : padding-left, padding-right;
py-* : padding-top, padding-bottom;
<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>
图片
1.设置边框宽度，如果不写数值，默认是 1px
border-t-数值 ：border-top-width;
border-r-数值 ：border-right-width;
border-b-数值 ：border-bottom-width;
border-l-数值 ：border-left-width;
border-x-数值 ：border-left-width; border-right-width;
border-y-数值 ：border-top-width; border-right-width;
2.设置边框颜色
border-颜色-数值
border-red-500
例：
<divclass="bg-blue-600 w-[300px] h-[300px] border-t-2 border-b-2 border-red-500"><p class="pt-20 px-10 bg-red-300">好好学习</p><p class="py-3 px-10 bg-green-400">天天向上</p></div>
3.设置边框线条类型
border-solid ：border-style: solid;
border-dotted ：border-style: dotted;
border-dashed ：border-style: dashed;
border-double ：border-style: double;
<divclass="bg-blue-600 w-[300px] h-[300px] border-t-2 border-b-2 border-dotted border-red-500"><p class="pt-20 px-10 bg-red-300">好好学习</p><p class="py-3 px-10 bg-green-400">天天向上</p></div>
bg-颜色-数值
<divclass="bg-blue-600 w-[300px] h-[300px]"><p>好好学习</p><p>天天向上</p></div>
图片
1.设置字体大小: text-[ ]
<p class="text-[20px]">好好学习</p>
2.设置字体加粗
font-thin 表示 font-weight: 100;
font-light 表示 font-weight: 300;
font-normal 表示 font-weight: 400;
font-bold 表示 font-weight: 700;
font-black 表示 font-weight: 900;
<div class="bg-blue-600 w-[300px] h-[300px]"> <p class="text-[20px] font-bold">好好学习</p> <p>天天向上</p> </div>
图片
3.设置字体颜色：text-颜色-数值
<div class="bg-blue-600 w-[300px] h-[300px]"> <p class="text-[20px] font-bold text-yellow-400">好好学习</p> <p>天天向上</p> </div>
图片
hover:
hover:bg-red-300
hover:text-[60px]
hover:w-[500px]
hover:h-[200px]
<divclass="bg-blue-600 w-[300px] h-[300px] hover:bg-red-300 hover:text-[60px] hover:w-[500px] hover:h-[200px]"><p class="font-bold text-yellow-400">好好学习</p><p>天天向上</p></div>
图片
relative 表示 position: relative;
absolute 表示 position: absolute;
fiexed 表示 position: fiexed;
z-1 表示 z-index:1;
数值：1 表示 4px
top-1 表示 top: 4px;
left-2 表示 left: 8px;
right-10 表示 right: 40px;
bottom-3 表示 bottom: 12px;
任意值：
top-[5px]
left-[10rem]
right-[20px]
bottom-[100px]
例：
<divclass="bg-blue-600 w-[300px] h-[300px] hover:bg-red-300 fixed bottom-[20px] left-[100px]"><p class="font-bold text-yellow-400">好好学习</p><p>天天向上</p></div>
图片
flex 表示 display: flex;
flex-row 表示 flex-direction: row;
flex-col 表示 flex-direction: column;
justify-center 表示 justify-content: center;
items-center 表示 align-items: center;
flex-wrap 表示换行
flex-nowrap 表示不换行
flex-1 表示 flex:1;
例：
<divclass="bg-blue-600 w-[300px] h-[300px] flex flex-row justify-center items-center "><p class="bg-yellow-400 w-[100px] h-[100px] text-white-400">好好学习</p><p class="bg-red-400 w-[100px] h-[100px] text-white-400">天天向上</p></div>
图片
下面的例子中 p 标签有重复的样式
<div class="bg-blue-600 w-[300px] h-[300px] flex flex-row justify-center items-center flex-wrap" > <p class="bg-red-400 w-[100px] h-[100px] text-white text-[20px]">好好学习</p> <p class="bg-yellow-400 w-[100px] h-[100px] text-white text-[20px]">天天向上</p> </div>
如果遇到重复的样式，我们可以借助 @layer 和 @apply 指令定义全局复用的样式：
1.在 TailwindCSS 的样式文件中定义复用样式
图片
@layercomponents {.title {@applyw-[100px]h-[100px]text-whitetext-[20px];}
}
2.在类选择器中使用复用类名
<p class="title">好好学习</p><p class="title">天天向上</p>