Skip to main content

Tailwind CSS 使用

虽然名字里有 CSS，但我认为 Tailwind 更像是个基于 JS 的 UI 框架，它是要在开发环境下配合 JS 工作才能使用全部特性。

配合 Vue 3 使用​

Vue 3 的构建工具是 Vite，因此要看对于指引：https://tailwindcss.com/docs/guides/vite#vue

@tailwind 要在 @import 后面使用​

官方文档教我们将以下三行的 @tailwind 放到 src/style.css 中。

但要特别注意 vue 官方的 Vite 模板中（使用 npm init vue@latest 创建的项目），样式主入口文件实际是 src/assets/main.css

@tailwind 一定要要在 @import 后面使用，官方这里有提到该注意事项：https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports

@import "./base.css";
/* tailwind 一定要放 import 后面 */
@tailwind base;
@tailwind components;
@tailwind utilities;

VS Code 语法提示​

不装的话遇到 @tailwind xxx 的语法会：

Unknown at rule @tailwindcss(unknownAtRules)

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

Mark​

全部尺寸都用 tailwind 的类去写，基本能完全对应 Figma 设计稿。

16px 对应 1rem，也就是 4px 对应 0.25rem。

因此要看着 Figma 设计稿中的原始px，做简单的计算。

例如 Figma 中导航栏的高度为固定的 48px，那么就应先换算成 3rem，然后查 Tailwind 的尺寸表找到 h-12 对应 3rem，因此最终 class="h-12" 恰好对应我们想要的效果。

在设置 Transition 效果的时候，注意被动画的类名要完全一致。

例如 right-[-33.4%] 对应 right-[0] 才会有动画效果。

若写成了 right-[-33.4%] 和 right-0 这一对组合，则不会触发动画。

虽然二者都控制的是元素的 right 属性，但最终执行并不是如我们的预期，因此要多加注意。

Tailwind 最终帮我们生成并能实际触发动画的 class 如下：

.right-\[0\] {
    right: 0;
}
.right-\[-33\.4\%\] {
    right: -33.4%;
}

表单样式是单独分开的包，要手动安装并在 tailwind.config.js 单独引入：https://github.com/tailwindlabs/tailwindcss-forms

覆盖默认的 form-xxx 的激活状态边框颜色，要同时覆盖边框颜色和阴影颜色，即 border 和 ring ：focus:border-cyan-500 focus:ring-cyan-500

让想要有点击高亮的元素，改成 a 标签，既符合语义也方便使用。

注意：

  • a 标签要有 href 属性，才会有点击状态。
  • href 为空时，记得 @click.prevent 否则页面会刷新。

示例：

  • ✓ <a href="" @click.prevent>
  • ✕ <a @click.prevent>
  • ✕ <a href="">
  • ✕ <a @click.prevent>
  • ✕ <a>

修改默认的点击高亮效果颜色：

a {
  /* 默认的点击高亮效果 */
  -webkit-tap-highlight-color: rgb(117 215 231 / .5);
}

MDN 提示

非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！

但实测，主流浏览器都支持了，可以放心使用，加了这个对用户体验提升非常大。

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-tap-highlight-color Apple：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

宽高比 aspect 属性亲测手机上的夸克浏览器不支持。

最近测试日期：2022/10/11

替代方案是用回以前基于 Width 和 Padding 的 Hack。

在样式文件中使用 tailwind 内置的 class​

  • 手写 CSS 和 Tailwind 混合使用，更为灵活，事半功倍。
  • 像一些 flex 布局相关的样式，平时写得太多了，可以适当用 Tailwind 代替。
  • 二者之间空1行，好区分。
/src/styles/navbar.less
.navbar {
  @apply flex justify-between items-center;
  
  height: 3rem;
  padding: 0 1.5rem;
}

注意配置文件一定要定义好 content 规则​

并不是在样式中引了 @tailwind xxx 就万事大吉可以使用全部 Tailwind 内置类。 有部分 class 例如 p-6 bg-gray-200 这些 class 都是动态生成的，并且只有当模板文件中有使用过这些 class 时，才会动态生成。

如下例子中，由于使用了 Tailwind 的模板文件没有包含在配置文件的 content 规则里面，因此：

  • p-6 无效。
  • 而不需动态生成的 flex 则有效。
// project/tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{vue,js,jsx}"
  ]
}
// project/examples/Something.vue
<template>
  <div class="p-6 flex">Someting</div>
</template>

类名必须静态​

Tailwind 是打包编译时静态分析 class 属性并生成需要用到的 CSS 样式，并非是运行时解析。

如下的动态类名是无效的：

<div class={`duration-[${duration}ms]`}></div>

自动类名排序​

最近官方终于出了这个 Plugin - https://github.com/tailwindlabs/prettier-plugin-tailwindcss

平时通过良好的编写习惯，也可让 class 得到很好的组织。例如将普通样式和配色作区分：

  <a className={`
    flex gap-2 items-center p-3 pl-5 rounded-sm
    bg-light-300 dark:bg-white/5`}>
  </a>

不使用自动排序的另一个好处是可以按情况组织 class。例如单独将 transition 等动画相关 class 放同一行：

  <a className={`
    flex gap-2 items-center p-3 pl-5 rounded-sm
    bg-light-300 dark:bg-white/5
    transition-all duartion-300`}>
  </a>