定制化、高可用前台样式处理方案——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 实现
相关推荐
老A技术联盟6 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游9 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte14 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
小飞悟23 分钟前
🎯 什么是模块化?CommonJS 和 ES6 Modules 到底有什么区别?小白也能看懂
前端·javascript·设计
浏览器API调用工程师_Taylor23 分钟前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
FogLetter24 分钟前
初识图片懒加载:让网页像"懒人"一样聪明加载
前端·javascript
微客鸟窝25 分钟前
一文搞懂NVM管理Node.js:从安装到实战全攻略
前端
归于尽26 分钟前
Cookie、Session、JWT 的前世今生
前端
程序员辉哥27 分钟前
学会在Cursor中使用Rules生成代码后可以躺平了吗?
前端·后端
请你吃div32 分钟前
JavaScript 实用函数大全(超实用)
前端·javascript·面试