文章目录
一、Tailwind Css介绍
Tailwind Css 是由 JavaScript 编写的 Css 框架,基于PostCss 解析
Tailwind CSS 中文文档 :https://www.tailwindcss.cn/
优点分析:
- 类名驱动文档
- 生产环境体积很小,编译后只有 8.7KB
- 支持 栅格、hover/focus、深色模式等
- 可以通过 apply 指令实现自定义类名
- 支持前沿样式属性,比如很多浏览器不支持 grid 属性,但此框架帮我们做了转换
- 写代码时在 VSCode 里有提示
二、PostCss 处理 Tailwind Css 基本流程
PostCSS 利用 JavaScript 的强大编程能力对 CSS 代码进行转换。数以百计的 PostCSS 插件可以用来为 CSS 属性添加特定于浏览器厂商的前缀、支持未来 CSS 语法、模块化、代码检测等。
PostCSS中文网:https://www.postcss.com.cn/
PostCss 功能介绍:
- 增强代码的可读性 (利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性,并根据这些数据帮你自动为 CSS 规则添加前缀。)
- 将未来的 CSS 特性带到今天!(PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法,并根据你的目标浏览器或运行时环境来确定你需要的 polyfills,此功能基于 cssdb 实现。)
- 终结全局 CSS(CSS 模块 能让你你永远不用担心命名太大众化而造成冲突,只要用最有意义的名字就行了。)
- 避免 CSS 代码中的错误【类似 eslint】(通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法,也包括类似 CSS 的语法,例如 SCSS 。)
PostCss 处理 Tailwind Css 基本流程,原理类似于 —— 虚拟 DOM 解析
- 将CSS解析成抽象语法树(AST树)
- 读取插件配置,根据配置文件,生成新的抽象语法树
- 将 AST 树 ”传递” 给一系列数据转换操作处理(变量数据循环生成,切套类名循环等)
- 清除一系列操作留下的数据痕迹
- 将处理完毕的 AST 树重新转换成字符串
三、使用 Tailwind Css 栗子
1. 初始化项目
yarn create vite
2.安装 Tailwind Css
代码如下(示例):
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
//tailwind依赖 Headless UI 需要下载
npm install @headlessui/vue @heroicons/vue
3.执行命令,生成两个配置文件
- postcss.config.js
- tailwind.config.js
npx tailwindcss init -p
配置文档参考:配置-Tailwind CSS 中文文档
4.修改配置文件 tailwind.config.js
2.6版本
module.exports = {
purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
3.0版本
module.exports = {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}
5.创建 index.css,并在 main.ts 中引入
创建 index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
本文取自:https://blog.csdn.net/Lyrelion/article/details/128227554