tailwindcss (opens new window)

给我一个你不用 tailwindcss 的理由 (opens new window)

不合时宜的 CSS：Tailwind CSS 引发的思考 (opens new window)

特点

• 不需要 css，直接写官方规定的 class 类，也就不需要起各种 class 类名，也不需要 less 等预处理 css
• 类名是全局通用的，避免了大量重复的 class 类（项目构建体积大幅下降）
• 支持模板复用，易扩展
• vscode 有智能提示插件

使用方式

• 安装 vscode 插件，Tailwind CSS IntelliSense。
• 安装依赖，配置 tailwind.config.js，见vue3 安装 Tailwind CSS (opens new window)。
• 移动端适配方案（参考官网）
• 响应式设计 (opens new window)

最佳实践

• 如果样式很多，写在 html 上很长，则可以使用@apply 规则将样式写在类名里

  <div class="my-css">
      
  </div>
  <style>
  .my-css {
    @apply flex m-3 rounded;
  }
  </style>
  

• 全局通用的样式

  可以使用@layer 规则，写到组件样式

  @layer components {
    .btn-blue {
      @apply bg-blue-500 hover:bg-blue-700 text-white font-bold;
    }
  }