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}

安装与编译

安装 tailwindcss、postcss 与 autoprefixer

$ npm install tailwindcss postcss autoprefixer

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

$ npx tailwindcss init

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

/* style.css */@tailwind base;@tailwind components;@tailwind utilities;

将 style.css 编译为 tailwind.css

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

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

使用之前

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

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

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

// tailwind.config.jsmodule.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 可以用，不过这对于什么都想自干的人应该再适合不过了吧，接着下篇会来介绍它设定的部分～那就这样啦～