24 Vue3之集成TailwindCSS
Tailwind CSS
Tailwind CSS是一个由js编写的CSS 框架 他是基于postCss 去解析的
官网地址Tailwind CSS 中文文档 - Tailwind CSS - 只需书写 HTML 代码，无需书写 CSS，即可快速构建美观的网站。 | TailwindCSS中文文档 | TailwindCSS中文网
对于PostCSS的插件使用，我们再使用的过程中一般都需要如下步骤：
- PostCSS 配置文件 postcss.config.js，新增 tailwindcss 插件。
- TaiWindCss插件需要一份配置文件，比如:tailwind.config.js。
PostCSS 中文网https://www.postcss.com.cn/
postCss 功能介绍
PostCSS - 是一个用 JavaScript 工具和插件来转换 CSS 代码的工具
- 增强代码的可读性 （利用从 Can I Use 网站获取的数据为 CSS 规则添加特定厂商的前缀。 Autoprefixer 自动获取浏览器的流行度和能够支持的属性，并根据这些数据帮你自动为 CSS 规则添加前缀。）
- 将未来的 CSS 特性带到今天！（PostCSS Preset Env 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现。）
- 终结全局 CSS（CSS 模块 能让你你永远不用担心命名太大众化而造成冲突，只要用最有意义的名字就行了。）
- 避免 CSS 代码中的错误（通过使用 stylelint 强化一致性约束并避免样式表中的错误。stylelint 是一个现代化 CSS 代码检查工具。它支持最新的 CSS 语法，也包括类似 CSS 的语法，例如 SCSS 。）
postCss 处理 tailWind Css 大致流程
将CSS解析成抽象语法树(AST树)
读取插件配置，根据配置文件，生成新的抽象语法树
将AST树”传递”给一系列数据转换操作处理（变量数据循环生成，切套类名循环等）
清除一系列操作留下的数据痕迹
将处理完毕的AST树重新转换成字符串
初始化项目
npm init vue@latest
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init -p //生成配置文件
修改配置文件 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: [],}
创建一个index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
main.ts引入
<div class="space-y-4"><div class="w-96 bg-white shadow rounded">w-96</div><div class="w-80 bg-white shadow rounded">w-80</div><div class="w-72 bg-white shadow rounded">w-72</div><div class="w-64 bg-white shadow rounded">w-64</div><div class="w-60 bg-white shadow rounded">w-60</div><div class="w-56 bg-white shadow rounded">w-56</div><div class="w-52 bg-white shadow rounded">w-52</div><div class="w-48 bg-white shadow rounded">w-48</div>
</div>npm run dev就行了。