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

为什么要用Tailwind CSS

css
共406个字,阅读时间 2 分钟
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://icebreaker.top/articles/2020/10/Tailwind-1

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。