此页面需要javascript支持,请在浏览器中启用javascript

为什么要用Tailwind CSS

css
阅读 

Tailwind CSS

技术栈&开发工具

主要解决了什么问题

  • 按照以往的搭站经验,一般会定义一套全局样式,然后选择一套 UI Toolkit (本项目里先预制了本人最熟悉的element-ui)
  • 一开始用 element-ui 快速做一套标准的后台管理系统,实现起来是很快的
  • 可是遇到一些交互性又强,自定义样式要求又高的场景时,就出现了一些问题

例如:

  • 我们手动改变了el-button的高度,此时因为组件内部的font-size和line-height和组件的size是绑定的,在高度改变后,往往会出现不垂直居中的情况
  • 此时我们往往会写出一些很 ‘ 丑陋 ‘ 的样式

例如在组件里创建一个非scoped的style标签,先添加一个父级别的唯一class(company-search-bar-wrapper),然后利用样式优先级覆盖:

.company-search-bar-wrapper {
  .exam-select-wrapper {
    .exam-select {
      .el-input__inner {
        height: 60px;
        border: none;
        &::placeholder {
          color: #ccc;
          font-size: 16px;
        }
      }
    }
  }
}

或者利用vue-loader的深度作用选择器 (scss里用::v-deep)

.demo-dialog {
  ::v-deep .el-dialog {
    border-radius: 20px;
  }
}

或者有需要提炼全局引入的就直接写个 element-ui.global.scss 和 element-variables.scss 然后在 theme 引入后,进行覆盖

这种修改方式虽然可行,然而修改过程却是令人沮丧的,我们在其中需要利用样式的优先级,花费很大的精力,而且 element 自带的样式也只是静静的躺在那里,无法purge。

© 2021 icebreaker 苏ICP备19002675号-2
version:1.2.2