TailwindCSS 從零開始 - TailwindCSS 3.0.0-alpha.1 釋出 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 29

Modern Web

TailwindCSS - 從零開始系列第 29 篇

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

13th鐵人賽 tailwindcss

Tim Hsu

2021-10-12 09:41:54

2151 瀏覽

分享至

tailwindcss

此系列文章已改編成書，歡迎購買：https://www.tenlong.com.tw/products/9786267146460?list_name=i-r-zh_tw

2021.10.2 於官方 GitHub 公告。

計畫趕不上更新

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

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

更新消息

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

新的 utility

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

新的 variants

file：上傳檔案按鈕樣式。
open：給 details 跟 dialog 標籤使用的樣式。

改變的部分

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 來玩玩看喔！