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

目录

企业级项目下 css 处理痛点

安装 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 [email protected] [email protected] [email protected]，安装 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 [email protected]安装 sass

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

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

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

tailwindcss 设计理念和价值体现 

设计理念

        ·原子化 css

价值体现

        ·高定制化

        ·高个性化

        ·高交互性

总结来说

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