0x01 概述 （1）简介 • Tailwind CSS 官网：https://www.tailwindcss.cn/ • Tailwind CSS 是一个 CSS 框架，使用初级“工具”类创建布局 • 如 Bootstrap 等传统 CSS 框架，其使用的类通常与组件直接相关；然而，Tailwind 则采用了不同的方法，它将类作为工具集合，让用户能够自由组合这些工具来构建个性化的自定义组件 • 工具类是简单的 HTML 类，其作用域通常为单个和特定 CSS 属性，具有以下优势 • 根据目的命名 • 易于理解和记忆 • 作用浅显易懂 • 不存在命名不一致 • 支持快速布局创建和测试 • Tailwind 有一个条件类，用于为断点、响应状态等命名 （2）基本环境配置 • 代码文本编辑工具：VSCode 或其他 • 推荐插件： • 标签重命名：Auto Rename Tag • 实时加载：Live Server • PostCSS 语法支持：PostCSS Language Support • 代码格式化：Prettier • Tailwind 官方补全：Tailwind CSS IntelliSense • 包管理器：Node.js 或其他 • （可选）版本控制：Git （3）创建项目

1. 在任意位置新建一个 index.html
2. 使用 CDN 引入 Tailwind：https://cdn.tailwindcss.com/ 1

2

3 4 5 6 7 <title>Document</title> 8 <script src="https://cdn.tailwindcss.com/"></script> 9 10 11 0x02 基本功能 （1）使用颜色 • 默认包含的颜色： black #000000 white #FFFFFF red #EF4444 green #22C55E blue #3B82F6 orange #F97316 yellow #EAB308 purple #A855F7 lime #84CC16 emerald #10B981 teal #14B8A6 cyan #06B6D4 indigo #6366F1 violet #8B5CF6 fuchsia #D946EF pink #EC4899 rose #F43F5E sky #0EA5E9 gray #6B7280 slate #64748B zinc #71717A neutral #737373 stone #78716C amber #F59E0B • 文本颜色：text-[color]-[shade] • color：颜色名称 • shade：色度，取值范围为 100~900，不可对黑色或白色使用 1

Color Black

2

Color White

3

Color Red 500

4

Color Blue 500

5

Color Gray 500

6

Color Green 500

• 背景颜色：bg-[color]-[shade] 1

BgColor White

2

BgColor Red 500

3

BgColor Black

• 下划线颜色：underline decoration-[color]-[shade] • underline：添加下划线 1

UlColor Default

2

UlColor Red 500

3

UlColor Green 500

• 边框颜色：border border-[color]-[shade] • border：添加边框 1 2 3 • 间隔颜色：divide-[direct] divide-[color]-[shade] • divide-[direct]：添加分隔，direct 表示分隔方向，取值 x-横向、y-纵向 1 • 轮廓线颜色：outline outline-[color]-[shade] • outline：添加轮廓线 1 OlColor Default 2 OlColor Red 500 3 OlColor Green 500 • 盒子阴影颜色：shadow-[container] shadow-[color]-[shade(/opacity)] • shadow-[container]：添加阴影，container 表示阴影最大宽度，取值如下 container width sm 640px md 768px lg 1024px xl 1280px 2xl 1536px • (/opacity)：透明度，默认 100，取值 0~100 1 2 3 • 强调颜色：accent-[color]-[shade] 1 2 3 • 自定义颜色：-[(#xxxxx|rgb(r,g,b)|name)] • 十六进制、RGB、名称 1

Color #4682B4

2

Color RGB(46,130,180)

3

Color Steelblue

（2）容器与间距 • 容器 1 • container：标记为容器 • mx-auto：x 轴方向（横向）上，外边距（margin）自动 • 外边距：m?-[number] • m?：m-Margin、mt-MarginTop、ml-MarginLeft、mr-MarginRight、mb-MarginBottom • number=number * 0.25rem=number * 4px • 如：m-2 意思为 margin: 0.5rem 1 2 3 4 5 6 • 内边距：p?-[number] • p?：p-Padding、pt-PaddingTop、pl-PaddingLeft、pr-PaddingRight、pb-PaddingBottom • number=number * 0.25rem=number * 4px 1 2 3 4 5 6 • 间距：(-)space-[direct]-[number] • (-)：负间距 • direct：间隔方向，取值 x-横向、y-纵向 • number=number * 0.25rem=number * 4px 1 6 • flex：采用 Flex 布局 • flex-col：Flex 布局纵向 （3）版面设计 • 字体：font-[family] 1 2 3 • 自定义字体族配置 1 2 > 3 <script> 4 tailwind.config = { 5 theme: { 6 fontFamily: { 7 sans: ["Inter", "sans-serif"], 8 serif: ["Inter", "serif"], 9 mono: ["Inter", "monospace"] 10 } 11 } 12 } 13 </script> 14 • 字号：text-[size] 1 2 3 4 5 6 7 • 字重：font-[weight] 1 2 3 4 5 • 字距：tracking-[space] 1 2 3 • 文本对齐：text-[direct] 1 2 3 • 下划线重：decoration-[weight] 1 2 3 • 下划线风格：decoration-[type] 1 2 3 4 • 装饰偏移量：underline-offset-[number] 1 2 3 • 文本变换： 1

Normal Case

2

uppercase

3

LOWERCASE

4

capitalize test

（4）宽度与高度 • 宽度：w-[number] • number 取值 0~48 1 2 3 • 百分比：w-[number_1]/[number_2] 1 2 3 • 视点宽度 1 • 100% 容器 1 • 自定义宽度 1 • 最大宽度：max-w-[size] 1 • 高度（大部分与宽度方法相同）：h-[number] • number 取值 0~96 1 • 全屏高度 1 （5）布局与定位 • 定位：相对定位与绝对定位 1 • 左上角 1 • 右上角 1 • 左下角 1 • 右下角 1 • 顶边 1 • 左边 1 • 右边 1 • 底边 1 • 显示方式 1 • 层叠等级（Z 轴索引）：z-[number/auto] 1 • 浮动：float-[left/right/none] 1 （6）背景与阴影 • 背景 1 • 大小 bg-auto bg-cover bg-contain • 重复 bg-repeat bg-no-repeat bg-repeat-x bg-repeat-y bg-repeat-round bg-repeat-space • 定位 bg-center bg-top bg-bottom bg-left bg-left-top bg-left-bottom bg-right bg-right-top bg-right-bottom • attachment bg-fixed bg-local bg-scroll • 渐变：bg-gradient-to-[direct] from-[color]-[shade] to-[color]-[shade] 1 • 阴影 1 Tailwind Background Class CSS Code shadow-sm box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); shadow box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); shadow-md box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); shadow-lg box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); shadow-xl box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1) 0 8px 10px -6px rgb(0 0 0 / 0.1); shadow-2xl box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); shadow-inner box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); shadow-none box-shadow: 0 0 #0000; • 混合 1 （7）边框 • 宽度：border(-[direct])-[width] • (-[direct])：取值为 t、l、r、b、x 或 y，分别对应上、左、右、下、左右或上下 • width：取值为 0、2、4 或 8，分别对应 0px、2px、4px、8px 1 4 7 • 颜色 详见本章第（1）小节“边框颜色”部分 • 圆角：rounded(-[direct])(-[size]) • (-[direct])：取值为 t、l、r、b、x 或 y，分别对应上、左、右、下、左右或上下 • (-[size])：取值为 none、sm、【略】、md、lg、xl、2xl、3xl、full 1 • 轮廓线：outline(-[width]) • (-[width])：取值为 0、1、2、4、8 1 Click （8）过滤器 • 模糊：blur(-[size]) • (-[size])：取值为 none、sm、【略】、md、lg、xl、2xl、3xl 1 • 亮度：brightness-[number] • number：filter: brightness(number*0.1) 1 2 3 • 对比度：contrast-[number] • number：filter: contrast(number*0.1) 1 2 3 • 灰度 1 • 反色 1 • 褐化 1 • Hue rotate：hue-rotateo-[number] • number：取值为 0、15、30、60、90、180 1 2 3 0x03 进阶应用 （1）交互 • 悬停：hover: 1 Click • 聚焦：focus: 1 Click • 触发：active: 1 Click • 设置内部元素样式 1 • 伪类 1

2
• Item 1
3
• Item 2
4
• Item 3
5
• Item 4
6
• Item 5
7

• 外观 • 一般用于重置浏览器或操作系统默认的样式外观 1 2 True 3 False 4 5 6 True 7 False 8 • 游标：cursor-[type] • type 常见取值为 auto default pointer wait text move help not-allowed none context-menu progress cell crosshair vertical-text ... 1 • 选中 1 2 3 4 • 平滑滚动示例 1 2 3 4 5 <script src="https://cdn.tailwindcss.com/"></script> 6 7 8 Go to Bottom 9 10 11 12 （2）断点类与媒体查询 1. 窗口宽度实时监听 1 2

3 <script> 4 function showBrowserWidth() { 5 const width = window.innerWidth 6 document.querySelector('h1').innerText = `Width: ${width}` 7 } 8 window.onload = showBrowserWidth 9 window.onresize = showBrowserWidth 10 </script> 11 2. 修改 h1 标签样式，设置默认背景颜色 1 2

3 <script> 4 function showBrowserWidth() { 5 const width = window.innerWidth 6 document.querySelector('h1').innerText = `Width: ${width}` 7 } 8 window.onload = showBrowserWidth 9 window.onresize = showBrowserWidth 10 </script> 11 3. 在 body 标签中，根据窗口宽度设置背景颜色变化 1 2 3 size min-width sm 640px md 768px lg 1024px xl 1280px 2xl 1536px （3）分栏 • 基本列：columns-[number/type] • number：取值 1~12 • type：取值 auto、3xs、2xs、xs、sm、md、lg、xl、2xl、3xl、4xl、5xl、6xl、7xl 1 • 纵横比：aspect-[type] 1 （4）Flexbox • Flex 与对齐 1. 创建一个 Flexbox 1 2. 设置每项的对齐方向：items-[type] 1 3. 设置每项的对齐方式：justify-[type] 1 4. 设置换行，使某一项超出窗口：flex-wrap 1 • 列、间隙、顺序 1. 创建一个 Flexbox，设置为纵向排列 1 2. 设置间隙：gap-[number]（number * 0.25rem） 1 3. 调整顺序：order-[index] 1 • 放大与缩小 1 （5）Grid • 模板列：grid-cols-[number/none] • number：取值为 1~12 • 该语句等同于：grid-template-columns: repeat(number, minmax(0, 1fr)); 1 • 模板行：grid-rows-[number/none] • number：取值为 1~6 • 该语句等同于：grid-template-rows: repeat(number, minmax(0, 1fr)); 1 • 跨行/列：[row/col]-span-[number] • row-span-[number]：跨 number 行 • col-span-[number]：跨 number 列 1 （6）过渡与变换 初始按钮： 1 Click • 过渡 • transition-[type]：过渡类型，type 取值为 none、all、colors、opacity、shadow、transform • duration-[ms]：过渡时长，ms 取值为 75、100、150、200、300、500、700、1000 • ease-[type]：过渡效果，type 取值为 linear、in、out、in-out • delay-[ms]：延时时长，ms 取值为 75、100、150、200、300、500、700、1000 1 Click • 变换 • scale(-[axis])-[magnification]：缩放，axis 表示参照轴，取值为 x 或 y；magnification 表示缩放倍率，为 number% • rotate-[degree]：旋转，degree 表示旋转角度 • translate-[axis]-[distance]：位移，axis 表示参照轴，取值为 x 或 y；distance 表示位移距离，整数为 number * 0.25rem，分数为占比，full 为 100%，px 为 1px • skew-[direct]-[degree]：倾斜，axis 表示参照轴，取值为 x 或 y；degree 表示倾斜角度 1 Click （7）动画类与关键帧 • animate-[property]：property 取值如下： • none：animation: none; • spin：旋转 1 animate: spin 1s linear infinite; 2 @keyframes spin { 3 from { 4 transform: rotate(0deg); 5 } 6 to { 7 transform: rotate(360deg); 8 } 9 } • ping：扩散 1 animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; 2 @keyframes ping { 3 75%, 100% { 4 transform: scale(2); 5 opacity: 0; 6 } 7 } • pulse：闪烁 1 animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 2 @keyframes pulse { 3 0%, 100% { 4 opacity: 1; 5 } 6 50% { 7 opacity: .5; 8 } 9 } • bounce：弹跳 1 animation: bounce 1s infinite; 2 @keyframes bounce { 3 0%, 100% { 4 transform: translateY(-25%); 5 animation-timing-function: cubic-bezier(0.8, 0, 1, 1); 6 } 7 50% { 8 transform: translateY(0); 9 animation-timing-function: cubic-bezier(0, 0, 0.2, 1); 10 } 11 } 1 • 自定义动画与关键帧 1 2 3 4 5 <script> 6 tailwind.config = { 7 theme: { 8 extend: { 9 animation: { 10 'slow-spin': 'spin 3s linear infinite', 11 'custom': 'custom 1s linear infinite' 12 }, 13 keyframes: { 14 'custom': { 15 '0%': { 16 transform: 'rotate(0deg)' 17 }, 18 '90%, 100%': { 19 transform: 'rotate(360deg)' 20 } 21 } 22 } 23 } 24 } 25 } 26 </script> 27 28 29 32 33 （8）配置与客制化 • 在 head 标签中的 script 标签中写入配置 • 配置格式： 1 <script> 2 tailwind.config = { 3 theme: { 4 extend: { 5 'property-1': { 6 'key-1-1': 'value-1-1', 7 }, 8 'property-2': { 9 'key-2-1': 'value-2-1', 10 }, 11 // ... 12 } 13 } 14 } 15 </script> （9）夜间模式 • 配置夜间模式样式：dark: 1 • 是否使用夜间模式，默认根据操作系统 • 使用 Javascript 控制夜间模式 1 2 3 4 5 <script> 6 tailwind.config = { 7 darkMode: "class", 8 }; 9 </script> 10 <style> 11 .toggle-checkbox:checked { 12 right: 0; 13 border-color: #68d391; 14 } 15 .toggle-checkbox:checked + .toggle-label { 16 background: #68d391; 17 } 18 </style> 19 20 21 32 46 <script> 47 document.getElementById("toggle").addEventListener("change", function () { 48 if (this.checked) { 49 document.documentElement.classList.add("dark"); 50 } else { 51 document.documentElement.classList.remove("dark"); 52 } 53 }); 54 </script> 55 56 （10）分组 • 子选择：group[/name]，如： 1 2 5 • 兄弟选择：peer[/name]，如： 1 2 3 4 • 注意，兄弟选择仅支持对被命名的元素后面的元素选择 0x04 更好的开发环境 （1）基于 Tailwind CLI 构建环境 之前使用 CDN 的方式使用 Tailwind 并非生产的最佳选择，Tailwind 还支持使用 Tailwind CLI 等方式 1. 创建一个目录作为 Tailwind 项目的根目录 2. 在该目录下，使用命令 npm init -y 创建一个 package.json 作为包管理 3. 使用命令 npm install -D tailwindcss 引入 Tailwind 4. 使用命令 npx tailwindcss init 创建用于初始化 Tailwind 的配置文件—— tailwind.config.js 5. 修改 tailwind.config.js，允许 Tailwind 控制当前目录下所有后缀为 html 的文件 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 content: ['./*.html'], 4 theme: { 5 extend: {}, 6 }, 7 plugins: [], 8 } 6. 创建 input.css 作为主 CSS 文件 1 @tailwind base; 2 @tailwind components; 3 @tailwind utilities; 7. 修改 package.json，配置指令实现开启 Tailwind CLI 构建流程 1 { 2 // ... 3 "scripts": { 4 "build": "tailwindcss -i ./input.css -o ./css/style.css", 5 "watch": "tailwindcss -i ./input.css -o ./css/style.css --watch", 6 "test": "echo \"Error: no test specified\" && exit 1" 7 }, 8 // ... 9 } 8. 使用命令 npm run build 构建 CSS 文件及其目录 9. 创建 index.html，其中引入生成的 style.css，并添加一个标签使用 Tailwind 1 2 3 4 5 6 7 8 <title>Document</title> 9 10 11

Tailwind CSS

12 13 10. 使用命令 npm run watch 实时使用 Tailwind 渲染页面 （2）指令与函数 a. 指令 指令是 Tailwind 特定于可以在CSS中使用的规则，这些规则为 Tailwind 项目提供特殊的功能 • @tailwind：用于插入 Tailwind 的基本（base）、组件（components）以及工具类（utilities）等 • @apply：用于获取工具类中的样式 1 h1 { 2 @apply text-xl; 3 } • @layer：用于创建自定义样式 1 @layer base { 2 h1 { 3 font-size: 2rem; 4 } 5 } 6 @layer components { 7 btn-blue { 8 @apply bg-blue-500 px-4 py-2 rounded-xl font-bold hover:bg-blue-700; 9 } 10 } • @config：用于指定 Tailwind 在编译该 CSS 文件时应使用的配置文件 1 @config "./tailwind.input.config.js"; b. 函数 函数用于访问 Tailwind 中的特定值，构建后会使用静态值替换 • theme()：可以使用点表示法访问 Tailwind 配置值 1. 修改 tailwind.config.js 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 content: ['./*.html'], 4 theme: { 5 extend: { 6 spacing: { 7 128: '32rem' 8 } 9 }, 10 }, 11 plugins: [], 12 } 2. 修改 input.css，引入 spacing-128 1 .content { 2 height: theme('spacing.128'); 3 } • screen()：可以创建按名称引用断点的媒体查询 1 @media screen(xl) { 2 body { 3 @apply bg-black text-white; 4 } 5 } （3）使用 Webpack 与 PostCSS 环境 • Webpack 是一个模块打包工具，可以将带有依赖的模块打包成静态资源，官网链接 • PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具，官网链接 1. 创建一个目录作为 Tailwind 项目的根目录 2. 在该目录下，使用命令 npm init -y 创建一个 package.json 作为包管理 3. 使用命令 npm install -D webpack webpack-cli webpack-dev-server style-loader css-loader postcss postcss-loader postcss-preset-env 安装 Webpack 与 PostCSS 以及相关加载器 4. 在根目录创建 src 目录，其中新建 index.js，作为 Webpack 的入口文件 5. 在根目录创建 webpack.config.js 文件，用于配置 Webpack 1 const path = require('path') 2 3 module.exports = { 4 mode: 'development', 5 entry: './src/index.js', 6 output: { 7 path: path.resolve(__dirname, 'dist'), 8 filename: 'bundle.js', 9 }, 10 } 6. 修改 package.json，配置指令实现开启 Webpack 构建流程 1 { 2 // ... 3 "scripts": { 4 "build": "webpack" 5 }, 6 // ... 7 } 7. 使用命令 npm run build 构建主 Javascript 文件及其目录 dist 8. 在 dist 目录下，创建 index.html，其中引入生成的 bundle.js 1 2 3 4 5 6 7 <title>Document</title> 8 <script src="bundle.js"></script> 9 10 11

Tailwind CSS

12 13 9. 修改 webpack.config.js，设置 Webpack 开发服务器，用于实时使用渲染页面 1 const path = require('path') 2 3 module.exports = { 4 // ... 5 devServer: { 6 static: { 7 directory: path.resolve(__dirname, 'dist'), 8 }, 9 port: 9000, 10 open: true, 11 hot: true, 12 compress: true, 13 historyApiFallback: true, 14 }, 15 } 10. 修改 package.json，配置指令实现开启 Webpack 构建流程 1 { 2 // ... 3 "scripts": { 4 "build": "webpack", 5 "dev": "webpack serve" 6 }, 7 // ... 8 } 11. 使用命令 npm run dev 开启 Webpack 开发服务器 12. 修改 webpack.config.js，设置样式加载器 1 const path = require('path') 2 3 module.exports = { 4 // ... 5 module: { 6 rules: [ 7 { 8 test: /\.css$/i, 9 include: path.resolve(__dirname, 'src'), 10 use: ['style-loader', 'css-loader', 'postcss-loader'], 11 }, 12 ], 13 }, 14 } 13. 使用命令 npm install -D tailwindcss 引入 Tailwind 14. 使用命令 npx tailwindcss init 创建用于初始化 Tailwind 的配置文件—— tailwind.config.js 15. 修改 tailwind.config.js，允许 Tailwind 控制当前目录下所有后缀为 html 的文件 1 /** @type {import('tailwindcss').Config} */ 2 module.exports = { 3 content: ['./dist/*.{html, js}'], 4 theme: { 5 extend: {}, 6 }, 7 plugins: [], 8 } 16. 在根目录创建 postcss.config.js 文件，用于配置 PostCSS 1 const tailwindcss = reuqire('tailwindcss'); 2 3 module.exports = { 4 plugins: [ 5 'postcss-preset-env', 6 tailwindcss 7 ], 8 }; 17. 在 src 目录创建 style.css 作为主 CSS 文件 1 @tailwind base; 2 @tailwind components; 3 @tailwind utilities; 18. 修改 src/index.js，将 style.css 添加到入口文件 1 import './style.css' -End-