CSS - Tailwind CSS 入门与语法

小弟我之前一直是使用 Bootstrap 做为前端 CSS 框架，由於最近听到很多 Tailwind CSS 的花式吹捧，让我也开始感兴趣了，今天就一起来研究一下吧！

架构与特色

官网一开始就有说到，Tailwind CSS 是一个 utility-first 的框架，并且使用 PostCSS 做开发，而特色如下

• 不须大量编写 CSS，大部分仅需套用共用 class
• 相较 inline style 还提供 hover、focus 等等伪类 class
• 可透过语法组合 class 达到模组化
• 可自定义断点、变数、伪类等等，方便客制化
• 可自定义插件或是载入他人写好的插件
• 提供 tree-shake 将没用到的 CSS 移除

utility-first

utility-first 即是说以共用 CSS 为主，像是 Bootstrap 中的 text-center、mx-4 等等

PostCSS

PostCSS 是使用 JavaScript 转换 CSS 的工具，归类为後处理器，与预处理器的 SASS 为两种不同的东西，预处理器将撰写好的 Code 编译成 CSS，而後处理器则是把 Code 依照设定与插件做加工，实际上 Tailwind 的运行方式就是将 CSS 经过 PostCSS 内的 Tailwind 插件做加工，进而产出需要的档案

VSCode 插件

用 VSCode 写 Tailwind 时有很好的插件辅助，会依照 tailwind.config.js 提示可使用的 class

Tailwind 有许多 css 不认识的语法，所以撰写上可能会有很多错误提示，可以在 settings.json 加入以下设定，想了解更多设定可以看这里

// settings.json

{
  "css.validate": false
}

安装与编译

1. 安装 tailwindcss、postcss 与 autoprefixer

$ npm install tailwindcss postcss autoprefixer

2. 使用指令建立一个 tailwind.config.js

$ npx tailwindcss init

3. 建立一个 css 档案，并加入 Tailwind 基本程序码

/* style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

4. 将 style.css 编译为 tailwind.css

$ npx tailwindcss build ./style.css -o ./tailwind.css

这边的 tailwind.css 就是完整的 CSS 档罗！

使用之前

在看语法之前我们先看一下 Tailwind 的 CSS Reset，它采用的是 normalize 的版本，但在此之上又加了许多设定，以下有几个比较重要的

• 区块元素的 margin 为 0
• h1 ~ h6 的字体大小与粗细同一般文字
• 有序清单与无序清单设定为无样式
• svg 与 img 等等图像为 display: block
• border 颜色预设 #e5e7eb，宽度为 0

当然还有其他的设定，详细可以看官网，如果不想要这些设定则可以将 preflight 改为 false

// tailwind.config.js

module.exports = {
  corePlugins: {
   preflight: false
  }
}

语法介绍

Tailwind 内有许多自己的语法，包含我们一开始看到的 @tailwind，还有其他像是 @apply 或 @layer 等等，以下会一一介绍，详细也可以直接看官网

@tailwind

用来载入官方提供的样式

• 编译顺序由上而下，改变载入位置同时也会改变顺序
• @tailwind screens 可省略，预设会载入在最後方

@tailwind base; /* 基础样式 */
@tailwind components; /* 模组样式 */
@tailwind utilities; /* 共用样式 */
@tailwind screens; /* 响应式样式 */

@apply

用来将多个样式合并，Tailwind 的模组化就是靠此功能实现

• @apply 可与一般 CSS 一起使用
• @apply 後方样式编译时不照顺序排列，如要排列可使用多个 @apply
• 可直接 @apply 组好的 class 但 !important 不会继承
• 如需继承 !important 可直接写在 @apply 最後方

/* Input */
.btn {
  background-color: #3b82f6 !important;
  @apply py-2 px-4;
  @apply font-bold rounded;
}
.btn-blue {
  @apply btn;
  /* @apply btn !important; 可将所有 class 加上 !important */
}

/* Output */
.btn {
  background-color: #3b82f6 !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
  font-weight: 700;
}
.btn-blue {
  background-color: #3b82f6;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.25rem;
  font-weight: 700;
}

@layer

此功能会依照对应的图层将 CSS 插入该处

• 可使用的图层有 base、components 与 utilities
• 插入位置为该图层最後方
• 如果要插入的图层没有载入，则 class 会直接放在原处

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
}
@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded;
  }
}
@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

@variants

可将 class 加上各种的效果，例如 focus、hover 等等

• @variants 後方的顺序影响 CSS 排列顺序
• tailwind.config.js 中可使用的 variant 这边亦可使用

/* Input */
@variants focus, hover {
  .ares {
    color: #3b82f6;
  }
}

/* Output */
.ares {
  color: #3b82f6;
}
.focus\:ares:focus {
  color: #3b82f6;
}
.hover\:ares:hover {
  color: #3b82f6;
}

@responsive

能产出响应式的 class

• 使用 @variants responsive { ... } 同样也能做到该功能

/* Input */
@responsive {
  .ares {
    color: #3b82f6;
  }
}

/* Output */
@media (min-width: 640px) {
  .sm\:ares {
    color: #3b82f6;
  }
}
@media  (min-width: 768px) {
  .md\:ares {
    color: #3b82f6;
  }
}
@media (min-width: 1024px) {
  .lg\:ares {
    color: #3b82f6;
  }
}
@media (min-width: 1280px) {
  .xl\:ares {
    color: #3b82f6;
  }
}

@screen

可将响应式的断点以 tailwind.config.js 内定义的字串替代

/* Input */
@screen lg {
  .ares {
    color: #3b82f6;
  }
}

/* Output */
@media (min-width: 1024px) {
  .ares {
    color: #3b82f6;
  }
}

theme()

提供我们去查找 tailwind.config.js 内的参数

• theme() 内需传入字串，且同 JavaScript 使用 . 或 [] 查找

/* Input */
.ares {
  color: theme('colors.blue.500');
}

/* Output */
.ares {
  color: #3b82f6;
}

结语

之前在写 Bootstrap 的时候一值很喜欢用 utility class，实际读过 Tailwind 之後发现这才是把 utility 发挥到极致阿！虽然没有许多现成的 Component 可以用，不过这对於什麽都想自干的人应该再适合不过了吧，接着下篇会来介绍它设定的部分～那就这样啦～