定制化、高可用前台样式处理方案——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 实现
相关推荐
Hockor1 小时前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军1 小时前
React 实现 useMemo
前端·react.js·前端框架
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到111 小时前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡1 小时前
浏览器是否支持webp图像的判断
前端
Xi-Xu1 小时前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂1 小时前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军1 小时前
React 实现多个节点 diff
前端·react.js·前端框架
用户40812812003811 小时前
拓展运算符和剩余参数
前端
再见了那维莱特1 小时前
6.29 drilling notes
前端