Tailwind CSS

技术栈 & 开发工具

• IDE: vscode + Tailwind CSS IntelliSense
• 学习网站: Tailwind
• 技术栈 nuxt

主要解决了什么问题

• 按照以往的搭站经验，一般会定义一套全局样式，然后选择一套 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。