目录
企业级项目下 css 处理痛点
·统一的变量维护困难（颜色、距离等）
·大量的 ClassName 负担
·HTML、CSS 分离造成了编辑器上下滚动问题
·响应式、主题切换实现复杂
·吐槽的文章 CSS Utility Classes and "Separation of Concerns"
解决：
·tailwindcss 就是一个很好地方向。
安装 tailwindcss
1. 在我们的项目中执行 npm install -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.2，安装 tailwindcss
2. 执行 npx tailwindcss init -p 创建`tailwind.config.js`文件，该文件为 tailwindcss 的配置文件，该文件默认内容为：
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}3. 接下来我们需要添加 模板路径 (tailwind 的应用范围）
4. 在 tailwind.config.js 文件中的 content 选项下，写入如下内容：
content: [' ./index.html', './src/**/* {vue, js} '],5. 接下来我们需要添加一些 tailwind 的指令
6. 创建 src/styles/index.scss 文件，并写入如下代码：
// 导入 tailwind 的基础指令组件
@tailwind base;
@tailwind components;
@tailwind utilities:7. 然后在 src/main.js 中引入该 index.scss
8. 因为我们使用了 scss，所以需要安装 sass，执行 npm i -D sass@1.45.0安装 sass
9. 此时 tailwind 已经安装到我们的项目中
10. 我们可以在 src/App.vue 中为 img 标签增加一个 class="bg-red-900"
11. 查看项目 img 标签背景变为红色，则表示成功
tailwindcss 设计理念和价值体现
设计理念
·原子化 css
价值体现
·高定制化
·高个性化
·高交互性
总结来说
- 如果你想要实现一个 通用的后台项目，那么推荐使用 通用组件库 实现
- 如果你想要实现一个 高定制化、高个性化、高交互性 的前台项目，那么推荐使用 tailwindcss 实现
