目录
[企业级项目下 css 处理痛点](#企业级项目下 css 处理痛点)
[安装 tailwindcss](#安装 tailwindcss)
[tailwindcss 设计理念和价值体现](#tailwindcss 设计理念和价值体现)
企业级项目下 css 处理痛点
每隔六个月,你要学习的前端技术就增加了一倍。这样的一个变化好像只适用于 js 端,html、css 好像已经有很多年没有发生过大的变化了。难道是因为 html、css 已经足够成熟,不需要再进行改变了吗?应该也不是的,比如针对于 css 而言,我们在进行企业开发时,就会遇到很多问题。
·统一的变量维护困难(颜色、距离等)
·大量的 ClassName 负担
·HTML、CSS 分离造成了编辑器上下滚动问题
·响应式、主题切换实现复杂
·吐槽的文章CSS Utility Classes and "Separation of Concerns"
解决:
**·**tailwindcss 就是一个很好地方向。
安装 tailwindcss
-
在我们的项目中执行 npm install -D tailwindcss@3.0.23 postcss@8.4.8 autoprefixer@10.4.2,安装 tailwindcss
-
执行 npx tailwindcss init -p 创建`tailwind.config.js`文件,该文件为 tailwindcss 的配置文件,该文件默认内容为:
javascript
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}
-
接下来我们需要添加 模板路径 (tailwind 的应用范围)
-
在 tailwind.config.js 文件中的 content 选项下,写入如下内容:
javascript
content: [' ./index.html', './src/**/* {vue, js} '],
-
接下来我们需要添加一些 tailwind 的指令
-
创建 src/styles/index.scss 文件,并写入如下代码:
css
// 导入 tailwind 的基础指令组件
@tailwind base;
@tailwind components;
@tailwind utilities:
-
然后在 src/main.js 中引入该 index.scss
-
因为我们使用了 scss,所以需要安装 sass,执行 npm i -D sass@1.45.0安装 sass
-
此时 tailwind 已经安装到我们的项目中
-
我们可以在 src/App.vue 中为 img 标签增加一个 class="bg-red-900"
-
查看项目 img 标签背景变为红色,则表示成功
tailwindcss 设计理念和价值体现
设计理念
·原子化 css
价值体现
·高定制化
·高个性化
·高交互性
总结来说
- 如果你想要实现一个 通用的后台项目,那么推荐使用 通用组件库 实现
- 如果你想要实现一个 高定制化、高个性化、高交互性 的前台项目,那么推荐使用 tailwindcss 实现