定制化、高可用前台样式处理方案——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 的配置文件，该文件默认内容为：

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 设计理念和价值体现

设计理念

·原子化 css

价值体现

·高定制化

·高个性化

·高交互性

总结来说

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