简介
Tailwind CSS 是一个实用优先的 CSS 框架，与传统的框架（如 Bootstrap、Foundation）不同，它没有预定义的组件，而是提供了一系列原子化的 CSS 类，允许你直接在 HTML 中应用样式，而且也支持自定义样式对其进行扩展。
核心特点：工具类优先；响应式设计；鼠标悬停、聚焦以及其他状态；夜间模式；重用样式；自定义整个框架；
工具类优先的概念也就是，优先使用提供的工具类样式去组合想要的样式，而不是写复杂的自定义的css代码，这样能极大缩减代码冗余，而且灵活多变。
安装
第一种：CDN
<script src="https://cdn.tailwindcss.com"></script>第二种：npm
- 使用 Tailwind CLI 工具
//安装 Tailwind CLI 工具npm install tailwindcss @tailwindcss/cli//在css文件中导入 tailwindcss，添加下面一句代码，例如 input.css@import"tailwindcss";//运行工具构建 Cssnpx @tailwindcss/cli-i./src/input.css-o./src/output.css--watch//使用<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><link href="./output.css"rel="stylesheet"></head><body><h1class="text-3xl font-bold underline">Hello world!</h1></body></html>- 使用 Vite 插件
//安装插件npm install tailwindcss @tailwindcss/vite//在配置文件 vite.config.ts 添加该插件import{defineConfig}from'vite'importtailwindcssfrom'@tailwindcss/vite'exportdefaultdefineConfig({plugins:[tailwindcss(),],})//在css文件中导入 Tailwind CSS@import"tailwindcss";//启动构建流程npm run dev//使用<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><link href="/src/styles.css"rel="stylesheet">//必须添加编译后的css文件</head><body><h1class="text-3xl font-bold underline">Hello world!</h1></body></html>- 使用 PostCSS 插件
//安装插件npm install tailwindcss @tailwindcss/postcss postcss//在配置文件 postcss.config.mjs 添加插件exportdefault{plugins:{"@tailwindcss/postcss":{},}}//下面步骤和 vite 插件的步骤一模一样，包括使用步骤使用
配置
使用 cli 工具可以快速生成一个基础的配置文件（ tailwind.config.js ）
npx tailwindcss init//文件内容module.exports={content:["./src/**/*.{html,js,vue}"],// 定义需要扫描的模板文件路径theme:{extend:{},// 自定义扩展},plugins:[],// 配置插件}content 字段用于指定 Tailwind 的模板文件路径，Tailwind 会扫描这些文件以生成必要的样式，减少生成的 CSS 文件体积，只生成模板文件中使用的样式，防止未使用的样式被编译到最终输出中。
theme 字段，可以自定义颜色、字体、间距、边框大小等，扩展新的样式。
plugins 字段，添加自定义的工具类。
工具类
文本相关
通常是使用 text- 作为前缀，例如，text-center text-red-500 ；但是如果是字体相关则是 font- 前缀。
背景相关
使用 bg- 前缀。
间距相关
p- 前缀，内边距 padding；m- 前缀，外边距 margin，如果是想要只加上边距则是 mt- 前缀，同理可推其他方向。
<divclass="m-8 p-4 mt-4"/>布局相关
flex ，设置为弹性布局；grid ，设置为网格布局，需要设置行列；items-center：将 flexbox 容器中的子元素垂直居中；justify-between：在 flexbox 容器中，子元素之间的空间均等分布。
边框相关
border / border- ，可单独使用也可以作为前缀；rounded- 前缀，圆角功能。
阴影相关
shadow / shadow- ，阴影功能。
响应式相关
不同屏幕尺寸对应不同的样式，sm：，small 小屏，宽度>=640px；md：，midlle 中屏，宽度>=768px；lg：，large 大屏，宽度>=1024px；xl: ，超大屏，宽度>=1280px。
//sm，md，lg不仅是作为屏幕尺寸使用，在其他工具里也有相同的用法，只是作为大小使用，例如 rounded-lg<divclass="bg-blue-500 sm:bg-green-500 lg:bg-red-500 p-4"/>状态相关
hover: ，鼠标悬停；focus: ，元素聚焦；active: ，元素激活；visited: ，访问过的链接样式；focus-within: ，父元素在子元素获得焦点时的样式。
<buttonclass="hover:bg-blue-700 focus:outline-none active:bg-red-500"></button>//可以使用多个状态组合<divclass="hover:focus:bg-blue-500"/>//可以使用 group 让父元素状态变化时改变子元素样式divclass="group"><buttonclass="px-4 py-2 bg-blue-500 text-white group-hover:bg-gray-300">将鼠标悬停在父级上</button></div>颜色相关
我们常用的颜色的英文单词，red，yellow，white 等，后面跟着的数字代表颜色亮度。
<divclass="bg-blue-500"/>伪类
根据元素在 dom 中的位置或顺序来应用样式。
<ulclass="space-y-4"><liclass="first:font-bold">Item1</li>//第一个样式<liclass="odd:bg-gray-100">Item2</li>//奇数样式<liclass="even:bg-gray-200 last:font-light">Item3</li>//偶数样式，最后一个样式</ul>表单样式
表单状态类，用于控制表单元素在不同状态下的样式变化，如必填（required）、无效（invalid）和禁用（disabled）状态。
<inputclass="border p-2 required:border-red-500 invalid:border-yellow-500 disabled:bg-gray-300"type="text"placeholder="输入内容">重用样式
看了上面后知道了，我们虽然使用方便，但是需要在每个标签样式里都写上工具类，对于重复的那些组合样式，如果一旦修改就要手动全部修改，非常麻烦，所以提供了自定义类使用。
需要在 css 文件里定义工具类时，在工具类组合前面加上修饰符。
//在css里定义该工具类，使用 avatar 名字就可以了，修改直接在这里修改即可.avatar{@apply w-16h-16rounded-full border-2border-white;}//定义层级@layer components{.avatar{@apply w-16h-16rounded-full border-2border-white shadow-md;}.button{@apply px-4py-2bg-blue-500text-white rounded-lg;}}修饰符有 @apply、@layer 和 variants 等；@apply：将常用的工具类组合成一个自定义类，减少重复代码；@layer：定义样式层级，将不同的工具类组合封装起来，便于管理；variants：扩展工具类，使得样式可以根据状态（如响应式、悬停、聚焦等）变化。
