iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

TailwindCSS - 從零開始系列 第 29

TailwindCSS 從零開始 - TailwindCSS 3.0.0-alpha.1 釋出

tailwindcss

2021.10.2 於官方 GitHub 公告。

計畫趕不上更新

在程式的世界有一個特色,更新速度。

就在不久前 TailwindCSS 釋出 3.0.0-alpha.1 的版本,目前尚在測試中,但有預告會在今年稍晚會正式發佈 3.0 版本。
相信有在使用 TailwindCSS 的朋友,也相當期待與關注到底更新了哪些東西,就來看一下官方的介紹。

更新消息

  1. JIT 模式:新的 JIT 引擎代替了傳統引擎,提供更好的性能與全新功能,例如可以堆疊 variants 與支援 arbitrary value
  2. JIT CDN:可以直接引入 CDN 並直接使用 JIT 模式(太爽了)。
  3. 預設所有的色彩:包含一些比較特別的顏色。

新的 utility

  • aspect-ratio:可以在圖片中直接使用此屬性。
  • scroll-snap:適用於 CSS 滾動效果。
  • scroll-behavior:用於瀏覽器的平滑滾動。
  • text-indent:縮排一行。
  • columnbreak-before/inside/after:多列內容的包裝。
  • touch-action:控制觸控螢幕的互動。
  • will-change:優化 transition 的效能。
  • border-xborder-y:同時設定邊框的上下與左右樣式。

新的 variants

  • file:上傳檔案按鈕樣式。
  • open:給 detailsdialog 標籤使用的樣式。

改變的部分

purge 改為 content

example

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.html' /* ... */],
}

如果想要做更多的設定,會如範例程式碼一樣:

// tailwind.config.js
module.exports = {
  content: {
    files: ['./src/**/*.html' /* ... */],
    transform: {
      md: (content) => {
        return remark().process(content)
      },
    },
    extract: {
      md: (content) => {
        return content.match(/[^<>"'`\s]*/)
      },
    },
  },
  safelist: [
    'font-bold',
    'text-center',
    { pattern: /bg-(red|blue|green)/, variants: ['hover', 'focus'] },
  ],
  // ...
}

相信看到這邊會關心的地方會是如果使用 3.0 版本,原本的 2.0 設定是否也要改成這樣?
貼心的官方團隊提出他們非常努力使用智能的方式去了解舊的配置,所以如果幸運的話 (代表可能還是會錯誤?),舊設定還是會有效的,至於正式版如何就要看官方怎麼更新了。

色彩名稱更改

原預設啟用的部分顏色,因為名稱衝突有做更動。

overflow-clip 已更改為 text-clip

因為瀏覽器更新加上了 overflow:clip 屬性,所以官方已經把此屬性改成 text-clip。

不再支援 PostCSS 7

要用 3.0,就要使用 PostCSS 8。

JIT CDN

可以在 head 中直接插入 CDN

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Example</title>
     <script src="https://cdn-tailwindcss.vercel.app/"></script> //加在這裡
    </head>
    <body>
      <!-- -->
    </body>
  </html>

或是使用 first-party 套件

<script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography,aspect-ratio,line-clamp"></script>

客製你的配置檔

不必另外安裝配置檔,引入 CDN 後即可在 head 中設定配置檔,這點滿酷的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn-tailwindcss.vercel.app/"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              tomato: 'tomato',
            },
          },
        },
      }
    </script>
  </head>
  <body>
    <!-- -->
  </body>
</html>

增加自訂的 CSS

直接在 CSS 中用 @apply 之類的屬性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn-tailwindcss.vercel.app/"></script>
    <style type="text/tailwindcss">
      body {
        @apply bg-pink-500;
      }
    </style>
  </head>
  <body>
    <!-- -->
  </body>
</html>

結語

看完 TailwindCSS 3.0-alpha.1 的公告滿令人興奮的,未來可以更自由的使用此框架,重點可以透過 CDN 的方式使用 JIT 真的會爽度很高,不用回頭去查什麼偽類沒有增加真的提高很多效率,至少我自己記不住這麼多的屬性是否有增加我想要的偽類,但目前是測試階段,建議不要直接使用在現行專案上,可以自己開個 side project 來玩玩看喔!

參考資料


上一篇
TailwindCSS 從零開始 - 如何在 Angular 中使用 TailwindCSS
下一篇
TailwindCSS 從零開始 - 完賽心得
系列文
TailwindCSS - 從零開始30

1 則留言

0
juck30808
iT邦新手 3 級 ‧ 2021-10-12 18:37:58

恭喜大大即將完賽XD !!!

Tim Hsu iT邦新手 4 級 ‧ 2021-10-13 22:25:42 檢舉

thank you!

我要留言

立即登入留言