iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 20
3
影片教學

CSS 優良部份系列 第 20

【Tailwind CSS 教學 - 13】超多 functions CSS 支援帶你飛

影片重點

  1. 講解 Tailwind 常見 functions 功能
  2. @screen 響應式支援
  3. @theme 讀取 Tailwind config 設定

文獻連結

  1. [https://tailwindcss.com/docs/functions-and-directives](Functions & Directives)

上一篇
【Tailwind CSS 教學 - 12】如何新增第三方套件,成為超強武器庫!
下一篇
【Bootstrap 5 客製化教學 - 1】環境架設,SCSS 整合輕鬆建
系列文
CSS 優良部份30

2 則留言

0
Lucas Yang
iT邦新手 5 級 ‧ 2020-10-17 00:41:13

Tailwind CSS v1.7 支援了在 CSS @apply 偽元素斷點的功能,真正實現了從 HTML 複製 class 到 CSS,就完成抽取 class 的操作。

不過是實驗性功能,要在設定開啟才能使用,可以先來體驗看看:

據說 v2 就會變默認開啟了

// tailwind.config.js
module.exports = {
  experimental: {
    applyComplexClasses: true,
  },
}

然後就可以在 CSS 裡這樣寫:

.btn {
  @apply bg-indigo-600 hover:bg-indigo-700;
}
0
Lucas Yang
iT邦新手 5 級 ‧ 2020-10-17 01:07:43

補充一個 Tailwind CSS 設定的部分,在預設空的 Config 檔裡的 theme 屬性裡還有個 extend 屬性。其實兩個都可以設定,但結果有差異。假設現在要增加一個新的 sky-blue 顏色 到 colors 設定:

  • theme:如果設定在 theme 下面,原本 Tailwind CSS 預設的顏色都會被覆蓋掉
  • theme.extend:顧名思義 extend 就是繼承。設定在 theme.extend 下面,原本 Tailwind CSS 預設的顏色都會被繼承/保留下來

Theme Configuration - Tailwind CSS 有完整的介紹

我要留言

立即登入留言