使用Tailwind CSS重新设计一个配置页面

项目背景

我有一个用 webView2 做界面的桌面软件，其中有个配置页，之前是用 Bootstrap 写的，这两天用 Tailwind CSS 重写了一遍。记录下收获。

为什么要改写：

当时只会用 Bootstrap，但是并不知道如何修改，只能使用它提供的一些默认样式，页面布局不灵活。知其然不知其所以然，想要新增一些配置选项时，非常别扭。
使用 Tailwind CSS，页面布局会更加紧凑，对表单内部的对齐，也可以做细微的排版调整。Tailwind 这种原子化的写法，用起来非常舒服，你可以明确地知道你写的 css 实现了什么效果。

效果对比

使用 Bootstrap:

使用 Tailwind CSS：

表单样式重置

通过使用tailwindcss-forms 插件，为表单样式提供基本的重置，使表单元素易于被实用程序覆盖。

npm install -D @tailwindcss/forms

// tailwind.config.js
module.exports = {
  plugins: [require('@tailwindcss/forms')]
};

抽取公共样式

/* ./src/cloneconf.css */
.myinput {
  @apply mx-1 inline-block rounded-md border-0 px-2 py-1 text-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600;
}

.mycombox {
  @apply inline-block rounded-md border-0 py-1 pl-2 pr-10 text-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600;
}
.mycheckbox {
  @apply mr-1 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-0 focus:ring-transparent;
}
.btn {
  @apply rounded-md border border-indigo-600 bg-white px-2 py-1 text-sm text-indigo-600 hover:bg-indigo-600 hover:text-white;
}
.btn-lg {
  @apply rounded-md bg-indigo-600 px-3.5 py-2 text-base tracking-wider text-white hover:bg-indigo-500;
}
.btn-lg-out {
  @apply rounded-md border border-indigo-600 bg-white px-3.5 py-2 text-base tracking-wider text-indigo-600 hover:bg-indigo-600 hover:text-white;
}

对输入框、复选框、下拉框、按钮等大量重复的元素，抽取为公共样式，避免 html 写一长串 css。

垂直对齐

html 结构如下：

<div id="tab-content1" class="tab-content">
  <div>
    <span>
      <label for="titlePre">标题前缀：</label>
      <input class="myinput" type="text" id="titlePre" />
    </span>
    <span>
      <label for="titleNext">标题后缀：</label>
      <input class="myinput" type="text" id="titleNext" />
    </span>
  </div>
</div>

通过 tab-content > div 和 tab-content > div > span 选择器避免了在 html 中重复写 class 样式。

使用 flex 布局，利用 items-center 保证同一行的表单元素垂直居中。

/* ./src/cloneconf.css */
.tab-content > div {
  @apply flex flex-wrap items-center gap-2;
}

.tab-content > div > span {
  @apply mr-3 inline-flex items-center gap-x-0.5;
}

CSS 压缩

在输出 css 时，使用--minify 参数，将文件大小由 26kb 压缩到 16kb。

npx tailwindcss -i ./src/cloneconf.css -o ./dist/cloneconf.css --watch --minify

What I Learned

Tailwind CSS 中设计表单样式的一些技巧：比如重复样式抽取、默认表单重置、垂直居中、css 选择器的使用。
使用--minify 压缩 css 文件