TailWind Css
-
简介
tailwindcss 是基于 PostCss 构建的一个高度可定制的、低级的CSS框架。通过postcss将源代码转 换为css文件。 而postcss是用于转换css的工具，它允许开发人员使用js插件来处理和转换css代码。
-
postcss
- 丰富的插件生态系统：css预处理，后处理，css格式化，css优化压缩等插件。
- 学习成本低：简易的API。
- 支持最新的css特性：css嵌套，css变量，css模块。
- 自由灵活的使用方式：根据需求自行决定css的处理流程。
- 与构建工具集成：与各种构建工具集成(webpack、)，实现自动化的css处理和构建流程。
tailwind安装
安装
npm install -D tailwindcss
初始化
npx tailwindcss init
配置
npx tailwindcss init -p
编译：解析文件css，在dist目录生成解析文件
npx tailwindcss -i./src/input.css -o./dist/output.css --watch
修改类名中的样式
tailwindcss文档存在各种类名来达到书写css的效果，类名由一个或多个单词组成，通过 ' - ' 连接。
- 修改类名中的在tailwind.config.js的theme中添加extend。
theme: {
extend: {
padding: { //p-1
1: "30px",
},
fontSize: {
base: ["30px", "40px"], //text-base
},
},
},
- 直接对对类名修改：
text-[13px]
function App() {
return <div className="text-[14px] ">hello world</div>;
}
扩展内置的类名
当 tailwind 的类名无法满足我们的需求怎么办？
- 通过@layer，@apply
//组合自定义类名
@layer components {
.primary {
@apply bg-[#000000] text-[#ffffff] px-4 py-2 rounded-md hover:bg-[#ffffff] hover:text-[#000000];
}
}
//还可以和标准css联合使用,这种情况不要使用prefix。
@layer components {
.primary {
@apply bg-[#000000] text-[#ffffff];
font-size: 20px;
}
}
function App() {
return <div className="primary">hello world</div>;
}
-
@layer
通过将自定义的css添加到不同层级，便于控制css的加载顺序和优先级。可以接受标准css语法。
base(全局)、components(组件级别)、utilities(实用级别) 和variants(变体级别，聚焦点，悬停效果css)四个层级。 -
@apply
用于将tailwind的类连接在一起，组合成自定义的类名。
-
自定义插件
如何自定义插件？
const plugin = require("tailwindcss/plugin");
module.exports = plugin(function ({ addUtilities }) {
addUtilities({
".add": {
background: "red",
color: "yellow",
},
});
});
//addUtilities，postcss插件的API，用于对tailwind添加自定义的css类，好处就是可以不同项目复用。
使用：在tailwind.config.js中plugins通过require引入路径。
解决className冲突
-
prefix
在tailwind配置文件的theme层级加上prefix，如何配置呢？
后果
- 所有的tailwind类名都需要携带前缀。
- @apply组合的类名也需要加上前缀。
@layer components {
.primary { //自定义类名，不需要前缀。
@apply tw-bg-[#000000] tw-text-[#ffffff];
}
}
- 自定义组件(@layer components)或实用类(tailwind类)加前缀。
- @layer定义的类也需要前缀。
postcss工作流程
怎么知道js、html的类名的？
postcss中存在各种插件，插件中存在一个extractor（提取器），通过正则匹配文本的class，添加到AST中生成代码。
