一文掌握 Tailwind CSS 基础
一文掌握 Tailwind CSS 基础
工欲善其事，必先利其器
先推荐一些好用的工具：
TailWind CSS 代码提示功能 vscode 插件：Tailwind CSS IntelliSense
Tailwind CSS 速查网站：https://tailwind.muzhifan.top/
注：本文假定你已经有一定的 CSS 基础
1 宽高
1.使用预定义类名
如 w-10 h-20 etc..
1 个数字单位代表 0.25rem, 一般根元素 font-size 是 16px, 0.25rem 即 4px
w-1 => 0.25rem => 4px
w-10 -> 2.5 rem -> 40px
h-10 同理
2.指定具体值
如 w-[80px] 即 80px
w-[5rem] 即 5rem 默认 80px
w-[5em] 5*父元素 font-size
3.指定百分比、分数值
w-80 即 80%
w-1/2
4.跟随设备值
w-full 占据父元素 100%
w-screen 占据设备宽 100%
w-svw、w-lvw、w-dvw 跟随视窗宽度
一般使用 w-dvw 或 h-dvh, 表示当前视窗的宽度。随着视窗大小的变化而变化，适用于大多数响应式设计场景。
5.最大最小宽度
min-w-[]、max-w-[]
min-h-[]、max-h-[]
max-width-20, 即 5rem
max-wid-[20px]
max-width-[20%]
2. size 正方形
size-20： 一个宽高都为 20 的正方形
size-value 中，value 支持值为偶数
3. margin、padding、space 间距
mr-2: 右边距为 2。ml-v,mt-v,mb-b 同理
mx-2, 左右边距为 2
my-2, 上下边距为 2
mx-auto: margin: 0 auto;
padding 写法和 margin 同理
space 用于父元素，作用是设置子元素之间的间距
space-x-4, 子元素之间间距 4px，space-y-4 同理
4. 边框、弧度
边框宽度
通过 border-value 设定线宽，颜色的设置也很简单：border-颜色-数值。
border-t|b|l|r: 上|下|左|右边框. 如 border-t-2 即 border-top-width: 2px;
border-x|y：横向|纵向 边框
不加 value 时，默认 value 为 1px
边框类型
border-solid 即 border-style: solid;
border-dashed 即 border-style: dashed;
border-dotted 即 border-style: dotted;
border-double 即 border-style: double;
弧度
rounded 即 border-radius: 0.25rem; /_ 0.25 _ 16 = 4px /
rounded-md 即 border-radius: 0.375rem; / 6px /
rounded-lg 即 border-radius: 0.5rem; / 8px */
rounded-full 即 border-start-start-radius: 9999px; border-end-start-radius: 9999px;
5. 字体 大小 对齐方式 斜体加粗
文本大小
text-sm: 0.875rem, 一般为 14px
text-base、text-md、text-[16px]: 16px
text-lg：18px
text-xl: 20px
文本对齐方式
text-left 即 text-align:left
text-center、text-right、text-justify 同理
加粗
italic 即 font-style: italic;
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;
6. 颜色 透明 渐变
<p className="text-red-500">islandZzz -- 文本颜色</p>
<p className="border-2 border-sky-500">islandZzz -- 边框颜色</p>
<p className="bg-orange-500">islandZzz -- 背景颜色</p>
<p className="bg-orange-500/75">islandZzz -- 背景颜色（75% 透明度）</p>
<p className="bg-orange-500/50">islandZzz -- 背景颜色（50% 透明度）</p>
<div className="bg-gradient-to-r from-purple-500 to-pink-500">
向右渐变（purple-500 👉 pink-500）
</div>
<div className="bg-gradient-to-l from-transparent to-sky-500">
向左渐变（sky-500 👈 transparent）
</div>
<div className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
向右渐变（indigo-500 👉 purple-500 👉 pink-500）
</div>
7. 伪类 伪元素
伪类：hover、focus、active
<div className="border-4 bg-black text-white hover:bg-blue-600 hover:text-fuchsia-500 size-40 text-center ">
twd css hover
</div>
<button class="bg-sky-500 active:bg-pink-500">button</button>
<input
type="text"
class="px-2 outline focus:outline-2 focus:outline-sky-500"
placeholder="请聚焦这里..."
/>
伪元素：before,after,file input,selection
<label class="block">
<span class="before:content-['⭐️'] before:mr-2 after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
Email
</span>
</label>
<input
type="file"
class="block w-full text-sm text-neutral-700
file:mr-4 file:py-2 file:px-4
file:rounded-full file:border-0
file:text-sm file:font-semibold
file:bg-cyan-50 file:text-cyan-700
hover:file:bg-cyan-100"
/>
<div class=" selection:bg-blue-400 selection:text-fuchsia-700">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni fugit
distinctio accusamus? Aliquid minus eaque, nostrum id perferendis
autem labore architecto quasi quidem, neque recusandae voluptates quam
nisi. Dolor, repellendus.
</p>
</div>
8. flex 与 grid 布局
flex 布局
flex 即 display:flex;
flex-1 即 flex: 1 1 0;
justify-center 即 justify-content:center;
items-center 即 align-items: center;
flex-col 即 flex-direction: column;
<ul className="flex flex-col text-center h-dvh bg-red-200">
<li className="border mb-2 py-4 px-2 ">#item1</li>
<li className="border mb-2 py-4 px-2">#item2</li>
<li className="border mb-2 py-4 px-2">#item3</li>
<li className="border mb-2 py-4 px-2">#item4</li>
<li className="border mb-2 py-4 px-2">#item5</li>
<li className="border mb-2 py-4 px-2">#item6</li>
</ul>
grid 布局
grid 即 display:grid;
grid 即 display: grid;
grid-cols-3 即 grid-template-columns: repeat(3, minmax(0, 1fr));
gap-4 即 gap: 1rem; /_ 16px _/
object-scale-down: object-fit: scale-down;
object-contain: object-fit: contain;
object-cover: object-fit: cover;
object-fill: object-fit: fill;
9. 定位 与 优先级
relative
absolute
fixed
sticky
top-10 即 top:2.5rem. left-10,bottom-10,right-10 同理
z-10 即 z-index:10;
10. transform 形变
translate 平移
translate-[x/y]-数值 就能实现 x 轴或 y 轴的平移
translate-x-[20px]
translate-x-1/2
translate-x-full
translate-y 同理
水平垂直居中：
<div className="relative size-40 border-2 bg-emerald-400">
<div className="absolute left-1/2 top-1/2 translate-x-[-50%] translate-y-[-50%] size-20 border-1 bg-purple-700"></div>
</div>
rotate 旋转
rotate-45:45deg
<div class="rotate-45 size-20 bg-lime-500">rotate</div>
scale 缩放
scale-50 即 scale(0.5)
<div class="scale-50 size-20 bg-rose-300">scale 0.5</div>
<div class="scale-75 size-20 bg-rose-300">scale 0.75</div>
<div class="scale-100 size-20 bg-rose-300">scale 1</div>
<div class="scale-125 size-20 bg-rose-300">scale 1.25</div>
skew 倾斜
skew-y-12: 12deg
11. transition 过渡效果
设置 transition 类名默认添加以下效果
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter,
backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
持续时间 duration
duration-value 单位是 ms
时间函数
ease-in 速度由慢到快
ease-out 速度由快到慢
延迟时间 delay
delay-value 单位是 ms
12. 动画
animation-spin 旋转
animation: spin 1s linear infinite;
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
animation-ping 放大并渐隐
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
animation-pulse 两个状态来回跳动
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
animate-bounce 上下跳动
animation: bounce 1s infinite;
@keyframes bounce {
0%,
100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
13. 样式覆盖 样式拓展
以下代码中，red 的默认颜色被覆盖成#1fb6ff，如 text-red, 而除了 red 之外的其他值不受影响
除此之外，也可以自定义一些其他的值, 如 custom
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
theme: {
extend: {
colors: {
red: "#1fb6ff",
custom: "#f3f4f6",
},
},
},
plugins: [],
};
14. 样式复用 @layer @apply
Tailwind 三大层级：
- base: 基础层级，定义一些基础属性如 margin、padding 等
- components: 在这个层级创建可复用的样式块，如 card 等
- utilities： 工具层级，如 layout、flex、grid 等
指定层级，使用已有样式
@layer: 指定样式具体在哪一层级, 如 base、component、utilities
@apply: 使用 TailwindCSS 现有类名
// scss
@layer components{
.card{
@apply bg-lime-500 size-60;
.item{
@apply size-20 bg-fuchsia-400;
}
}
}
<div className="card">
<div className="item">123</div>
<div className="item">123</div>
<div className="item">123</div>
</div>
