B站付金权直播课tailwind
# 安装初始化 tailwindcss
传统开发中，一套自定义设计中，需要自定义 CSS
使用 Tailwind，定义元素样式是通过直接在 HTML 上应用预设的类
以后写 CSS 不需要写样式，直接使用定义好的类
- 避免为设计类名而浪费精力
- 不需要写 CSS 文件
- 修改元素类名比起修改 CSS 文件，更加安全，不会产生全局影响
npx tailwindcss init可以生成配置文件在配置文件里，将要解析的文件路径配置进去
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {}
},
plugins: []
}
2
3
4
5
6
7
- 在根 CSS 文件中引入
@tailwind指令
@tailwind base;
@tailwind components;
@tailwind utilities;
2
3
vscode 插件：Tailwind CSS IntelliSense
# 处理 hover，focus 和其他状态的修饰符
每一个工具类都可以添加一个修饰前缀来描述你想要的效果，比如，要在bg-sky-700上应用 hover，可以使用hover:bg-sky-700
Tailwind 修饰符包含如下：
- 伪类：
:hover、:focus、:first-child、:required - 伪元素：
::before、::after、::placeholder、::selection - 媒体和特性查询：如响应断点、暗主题、
prefers-reduced-motion - 属性选择器：
[dir="rtl"]、[open]
这些修饰符可以堆叠到目标元素上
在鼠标悬浮和在中间断点和暗主题的时候改变背景色
断点是响应式设计的构建块，使用他们来控制何时可以在特定的屏幕或设备大小调整布局
<button class="dark:md:hover:bg-fuchsia-600 ...">
Save changes
</button>
2
3
# 伪类
# Hover, focus, active
# First, last, odd, even
# 表单状态 required, invalid, disabled
# 基于父元素(group-{modifier})
当要定义一些样式是基于父元素时，可以使用group类标记父元素，使用group-*修饰符标记子元素，如group-hover: text-white来赋予目标元素样式：当父元素鼠标悬浮时，子元素文字颜色改变
嵌套组
<ul role="list">
{#each people as person}
<li class="group/item hover:bg-slate-100 ...">
<img src="{person.imageUrl}" alt="" />
<div>
<a href="{person.url}">{person.name}</a>
<p>{person.title}</p>
</div>
<a
class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..."
href="tel:{person.phone}"
>
<span class="group-hover/edit:text-gray-700 ...">Call</span>
<svg
class="group-hover/edit:translate-x-0.5 group-hover/edit:text-slate-500 ..."
>
<!-- ... -->
</svg>
</a>
</li>
{/each}
</ul>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
任意组
# 基于兄弟节点(peer-{modifier})
<form>
<label class="block">
<span class="block text-sm font-medium text-slate-700">Email</span>
<input type="email" class="peer ..." />
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">
Please provide a valid email address.
</p>
</label>
</form>
2
3
4
5
6
7
8
9
# 伪元素
| 前缀 | 含义 |
|---|---|
| before | before 伪元素 |
| after | after 伪元素 |
| placeholder | input 框占位符 |
| file | input 上传文件 |
| marker | 列表的序号或者黑点 |
| selection | 鼠标选择的文字会有高亮背景等 |
| first-line | 文本的第一行 |
| first-letter | 文本的第一个文字 |
| backdrop | 对话框背景 |
# 响应式断点
| 前缀 | 含义 |
|---|---|
| sm | 最小宽度 640px |
| md | 最小宽度 768px |
| lg | 最小宽度 1024px |
| xl | 最小宽度 1280px |
| 2xl | 最小宽度 1536px |
# 媒体查询
# 颜色方案媒体查询
不加修饰符使用的是 light 模式，dark修饰符是暗色主题。
# 减少动画
使用motion-reduce、motion-safe修饰符设置样式，一般用在要添加过渡动画或者加载动画等地方。
# 对照
不知道是干啥的
# 视口方向
使用portrait、landscape修饰符为特定视口方向的元素添加样式。
# 打印样式
使用print修饰符为打印时添加样式，可以设置print:hidden类，表示打印时隐藏元素
# 支持规则
使用supports-[...]修饰符来给浏览器支持的规则指定样式
# 属性选择器
# aria 属性
这个做是无障碍特性的，暂时用不上
# data 属性
自定义属性，可以添加data-*修饰符
<!-- Will apply -->
<div data-size="large" class="data-[size=large]:p-8">
<!-- ... -->
</div>
<!-- Will not apply -->
<div data-size="medium" class="data-[size=large]:p-8">
<!-- ... -->
</div>
2
3
4
5
6
7
8
9
可以在tailwind.config.js配置文件中配置通用的 data 属性的快捷方式
module.exports = {
theme: {
data: {
checked: 'ui~="checked"'
}
}
}
2
3
4
5
6
7
可以在自定义data-*修饰符：
<div data-ui="checked active" class="data-checked:underline">
<!-- ... -->
</div>
2
3
# RTL 支持
ltr 修饰符只在 dir 属性为 ltr 时生效。