定制化、高可用前台样式处理方案——tailwindcss

目录

[企业级项目下 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

  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 的配置文件,该文件默认内容为:

javascript 复制代码
module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
}
  1. 接下来我们需要添加 模板路径 (tailwind 的应用范围)

  2. 在 tailwind.config.js 文件中的 content 选项下,写入如下内容:

javascript 复制代码
    content: [' ./index.html', './src/**/* {vue, js} '],
  1. 接下来我们需要添加一些 tailwind 的指令

  2. 创建 src/styles/index.scss 文件,并写入如下代码:

css 复制代码
// 导入 tailwind 的基础指令组件
@tailwind base;
@tailwind components;
@tailwind utilities:
  1. 然后在 src/main.js 中引入该 index.scss

  2. 因为我们使用了 scss,所以需要安装 sass,执行 npm i -D sass@1.45.0安装 sass

  3. 此时 tailwind 已经安装到我们的项目中

  4. 我们可以在 src/App.vue 中为 img 标签增加一个 class="bg-red-900"

  5. 查看项目 img 标签背景变为红色,则表示成功

tailwindcss 设计理念和价值体现

设计理念

·原子化 css

价值体现

·高定制化

·高个性化

·高交互性

总结来说

  1. 如果你想要实现一个 通用的后台项目,那么推荐使用 通用组件库 实现
  2. 如果你想要实现一个 高定制化、高个性化、高交互性 的前台项目,那么推荐使用 tailwindcss 实现
相关推荐
LuckySusu2 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu2 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu6 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在8 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu13 分钟前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate17 分钟前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员
云枫晖30 分钟前
手写Promise-构造函数
前端·javascript
文心快码BaiduComate31 分钟前
用Comate Zulu开发一款微信小程序
前端·后端·微信小程序
王王碎冰冰35 分钟前
基于 Vue3@3.5+跟Ant Design of Vue 的二次封装的 Form跟搜索Table
前端·vue.js
naice2 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git