1. Tailwind CSS介绍
tailwind css是一个很有争议的库，喜欢他的人和讨厌他的人都非常多 在项目中我们用以下痛点
- 统一的变量维护困难
- 大量的ClassName负担
- HTML、css分离造成了滚动问题
- 响应式、主题切换实现复杂 Tailwind CSS 其实就是把在现代工程化框架里把原子 CSS 做到极致的一个 CSS 框架 Tailwind的核心理念
官网介绍为无需离开HTML即可快速构建现代网站，这句话怎么解读呢？ 具体来说就是：tailwind提供了很多的具体类名，每个类名背后都代表着一段css的内容，之后我们需要在template模板中完成html，所以我们不需要再去切换到style区域，直接在html区域来完成对应的样式了。
tailwind优点
- 无需离开您的HTML，即可快速建立现代网站
- 生产环境的体积非常小。（Tailwind在为生产构建时自动删除所有未使用的CSS，这意味着您的最终CSS包可能是最小的。事实上，大多数Tailwind项目向客户发送的CSS少于10kB）
- 一切皆是响应式的。
- 支持 hover 和 focus 状态
- 担心复用性问题？大可不必(如果您在一遍又一遍的重复着相同的功能类，那么您最好将他们提取到一个组件或者模板片断，这样就会得到一个单一的源文件，因此可以在一个地方对他们修改。想保持原来的使用习惯而不是组件框架模式？使用 Tailwind 的 @apply 指令，复制和粘贴那些类名列表，就可以把重复的功能类抽取到一个自定义的 CSS 类中。)
- 支持深色模式
- 易于扩展、调整和改变。(Tailwind 包含一组精心设计的开箱即用的默认值，但实际上，所有内容都可定制，比如调色板、间距比例、盒子阴影以及鼠标光标样式。使用 tailwind.config.js 文件构建您自己的设计系统，然后让 Tailwind 将其转换成您自己的定制 CSS 框架。)
- 前沿特性带来舒服体验(Tailwind 具有绝对的现代性，它利用所有最新和最优秀的 CSS 特性为开发者带来尽可能愉悦的体验。我们提供了一流的 CSS grid 支持，由 CSS 变量支撑的可组合的转换和渐变色，对诸如 :focus-visible 等现代状态选择器的支持，以及其它更多的功能。)
- 世界一流的 IDE 集成。(在编辑器内既可得到智能的自动完成建议、提示及类定义等功能，而且无需配置。)
- 使用 Tailwind UI 加快开发速度(Tailwind UI 是由 Tailwind CSS 创始团队开发设计的一套精美的、完全响应式的 UI 组件，提供了数百个现成可用的示例供您选择，确保能帮助您找到一个构建项目的完美的起点。)
- 高定制化、高个性化、高交互性
为什么选择Taiwind css
- 行内样式：w无复用性，不合适
- 组件样式：通用组件库，固定风格，不合适！
- 传统形式：响应式、主题替换等复杂功能实现复杂 基于以上三个痛点，所以在我这个项目中决定使用tailwind css
2. Tailwind CSS配置
-
安装 npm install tailwindcss postcss autoprefixer -D
-
要配置 Tailwind CSS 安装，请在项目的根目录中生成tailwind.config.js配置文件。在嵌入式终端(
Alt+F12) 中，键入：npx tailwindcss init -p
npx tailwindcss init后，会自动生成 tailwind.config.js,和
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {}
},
plugins: []
}
3、修改tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {}
},
plugins: []
}
- postcss.config.js
module.exports = {
plugins: { tailwindcss: {}, autoprefixer: {} }
}
5、在index.scss里引入
// https://tailwindcss.com/docs/preflight
@tailwind base; /* Preflight will be injected here */
@tailwind components;
@tailwind utilities;
6、在main.js引入index.scss
