介绍
是一个 CSS 框架，和bootstrap，element ui，antd一样。将一些 css 样式封装好，用来提高开发效率的一个工具。个人理解就是可配置的原子CSS
环境安装
npm init -y && npm i tailwindcss autoprefixer postcss -D
配置文件
生成tailwind.config.js
// -full指令所有预设的基础类列出到配置文件中
npx tailwindcss init --full
使用
引入TailWind
将 Tailwind 基础类引入到项目的样式表中，如项目的样式在 style.css 文档中
/* styles.css */
@tailwind base; //重置默认属性
@tailwind components; //一些组件样式
@tailwind utilities; //工具类，也就是最常用的样式封装
tailwind 的工具类涵盖了大部分的常规需求，详细的列表见官网(https://docs.tailwindchina.com/docs)
常用工具类
1.颜色 类名= 使用目标+颜色+权重
一般都把颜色作为背景色、文字颜色或者边框颜色。举个🌰，颜色green：
文字颜色： text-green
背景颜色： bg-green
边框颜色1： border-green //default，不需要数字描述
边框颜色2： border-green-700 //数字表示颜色的深浅，越大颜色越深
2.文本 "text-"
文本颜色、文本装饰、大小写转换和溢出样式 见：https://docs.tailwindchina.com/docs/text-color
3.字体 "font-"
字体类型 "font-"+{type}
字体粗细 "font-"+{weight}
4.行高 "leading-"+{size}
5.背景 "bg-"
<div class="bg-purple-600 bg-opacity-100"></div>
<div class="bg-purple-600 bg-opacity-75"></div>
背景颜色、背景图片位置等见： https://docs.tailwindchina.com/docs/background-image
6. 边框 "rounded-"或"border-"
"rounded-"设置边框的圆角样式，"border-"设置边框颜色、粗细、边框类型等
<div class="rounded-full py-3 px-6">Pill Shape</div> //rounded-full=border-raduis:9999px
<div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>
<div class="border-4 border-light-blue-500 border-opacity-100"></div>
7. 边距 "p-" "m-"
内边距padding： 使用p{t|r|b|l|x|y}-{size}功能类控制元素一侧的内边距。size是tailwind.config.js中配置的spacing对象的键。
外边距margin： 使用 m{t|r|b|l|x|y}-{size},用法同padding
8. 布局
8.1 display：元素显示类型
其他样式：docs.tailwindchina.com/docs/displa…
8.2 Flex "flex-"
<div class="flex">
<div class="flex-1">1</div>
<div class="flex-1">2</div>
<div class="flex-1 hidden">3</div>
</div>
其他对齐方式：docs.tailwindchina.com/docs/justif…
box-sizing ：控制浏览器如何计算元素的总大小的功能类。
9. 伪类 { hover: | focus: | checked: |active: | visited: |disabled: } + 功能类
并不是所有功能类都可以放在伪类的后面，只有tailwind文档规定的才可使用，如果需要在tailwind的配置文件中配置variants选项。
//hover active
<button class="bg-red-500 hover:bg-red-700 active:bg-purple-500 ">
Hover me
</button>
//disabled
<button class="disabled:opacity-50">
Submit
</button>
//checked
<input type="checkbox" class="appearance-none checked:bg-blue-600">
编辑器插件
tailwind css intellisense
- 自动补全
- lint
- 悬停预览：当鼠标悬停在类名上时，展示其对应的 css
编译
使用Tailwind Cli
编译默认的 Tailwind CSS 文件
npx tailwindcss build -i style.css -o _style.css
根据指定的配置文件编译 Tailwind CSS 文件
npx tailwindcss build -i style.css -o _style.css -c tailwind.config.js
使用PostCss
postcss.config.js文件添加tailwindcss,autoprefixer配置即可
// postcss.config.js
module.exports = {
plugins: {
//…
tailwindcss: {},
autoprefixer: {},
//…
}
}
