vue3集成Tailwind Css

一、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