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

目录​​​​​​​

企业级项目下 css 处理痛点

安装 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 的配置文件，该文件默认内容为：

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 初体验

tailwindcss的核心理念：

tailwind 官方介绍为 无需离开HTML即可快速构建现代网站，那么这句话怎么解读呢？

具体来说就是：tailwind 提供了很多的 具体类名 ，每一个类名背后都代表 一段css 的内容。之前我们需要 template 中完成 html，style 中完成 css。那么在现在我们就可以把 css变成 对应的类名 直接添加到 html 的 class 中。

所以我们就不需要再去切换 style 区域，直接在 html 区域来完成对应的样式了。

问题：

        这样没有语义的结构真的好吗？

        这堆诡异的类名谁能记得住？

        tailwindcss 是一个非常富有争议的库，喜欢他的人和讨厌它的人都非常多。 

tailwindcss 设计理念和价值体现

CSS设计史上颗粒度的划分：

        颗粒度自上而下逐渐增大，颗粒度越大则代表着自由度越弱、约束越高、可定制性越弱、封装性强、语义化强。

        CSS颗粒度设计主要可以分为4种形式：行内样式、原子化CSS、传统形式、组件形式。

设计理念

        ·原子化 css

价值体现

        ·高自由度

        ·高定制化

        ·高可复用性

        ·高个性化

        ·高交互性

        我们的项目中，包含 响应式 和 主题更换，而这两种功能如果想要通过 传统形式 来进行实现的话，是比较复杂的。因为这意味着我们需要定义大量的 媒体查询 和 主题类名。

        综上所述，在 高定制化、高个性化、高交互性 的前台应用中，原子化CSS 是最合适的一种形式。而这种形式的具体体现就是 tailwindcss。

总结来说

1. 如果你想要实现一个 通用的后台项目，那么推荐使用 通用组件库 实现
2. 如果你想要实现一个 高定制化、高个性化、高交互性 的前台项目，那么推荐使用 tailwindcss 实现