iT邦幫忙

3

CSS - Tailwind CSS 入門與語法

Ares 2020-12-30 17:06:1312404 瀏覽

小弟我之前一直是使用 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-centermx-4 等等

PostCSS

PostCSS 是使用 JavaScript 轉換 CSS 的工具,歸類為後處理器,與預處理器的 SASS 為兩種不同的東西,預處理器將撰寫好的 Code 編譯成 CSS,而後處理器則是把 Code 依照設定與插件做加工,實際上 Tailwind 的運行方式就是將 CSS 經過 PostCSS 內的 Tailwind 插件做加工,進而產出需要的檔案

VSCode 插件

用 VSCode 寫 Tailwind 時有很好的插件輔助,會依照 tailwind.config.js 提示可使用的 class
VSCode插件

Tailwind 有許多 css 不認識的語法,所以撰寫上可能會有很多錯誤提示,可以在 settings.json 加入以下設定,想了解更多設定可以看這裡

// settings.json

{
  "css.validate": false
}

安裝與編譯

  1. 安裝 tailwindcsspostcssautoprefixer
$ npm install tailwindcss postcss autoprefixer
  1. 使用指令建立一個 tailwind.config.js
$ npx tailwindcss init
  1. 建立一個 css 檔案,並加入 Tailwind 基本程式碼
/* style.css */

@tailwind base;
@tailwind components;
@tailwind utilities;
  1. style.css 編譯為 tailwind.css
$ npx tailwindcss build ./style.css -o ./tailwind.css

這邊的 tailwind.css 就是完整的 CSS 檔囉!

使用之前

在看語法之前我們先看一下 Tailwind 的 CSS Reset,它採用的是 normalize 的版本,但在此之上又加了許多設定,以下有幾個比較重要的

  • 區塊元素的 margin 為 0
  • h1 ~ h6 的字體大小與粗細同一般文字
  • 有序清單與無序清單設定為無樣式
  • svgimg 等等圖像為 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 插入該處

  • 可使用的圖層有 basecomponentsutilities
  • 插入位置為該圖層最後方
  • 如果要插入的圖層沒有載入,則 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 可以用,不過這對於什麼都想自幹的人應該再適合不過了吧,接著下篇會來介紹它設定的部分~那就這樣啦~


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
EricChu
iT邦新手 4 級 ‧ 2020-12-30 21:49:41

Setting 好麻煩/images/emoticon/emoticon02.gif

Ares iT邦研究生 4 級 ‧ 2020-12-31 08:03:04 檢舉

不會啦~官網寫的很詳細!只是很多...

0
DanSnow
iT邦好手 1 級 ‧ 2020-12-31 23:26:22

@layer 比較跟 purgecss 那邊的設定有關候,不知道你講到設定時那邊會不會提到,就先留言了

我要留言

立即登入留言