Tailwind CSS v3.0

Tailwind CSS v3.0 隆重登場 — 帶來令人難以置信的效能提升、巨大的工作流程改進，以及數量驚人的新功能。

若要瀏覽一些最酷的新功能，請查看我們 YouTube 頻道上的「Tailwind CSS v3.0 的新功能」影片。

Tailwind CSS v3.0 絕對是我們有史以來最令人興奮的版本，包含下列改進：

即時 (Just-in-Time)，隨時可用 — 極快的建置時間、可堆疊的變體、任意值支援、更佳的瀏覽器效能等等。
開箱即用，支援所有色彩 — 包括所有擴展的調色盤色彩，例如青色、玫瑰色、紫紅色和萊姆色，以及五十種深淺不同的灰色。
彩色陰影 — 可用於有趣的發光和反射效果，以及在彩色背景上產生更自然的陰影。
捲動捕捉 API — 一組全面且可組合的公用程式，用於僅限 CSS 的捲動捕捉。
多欄式佈局 — 讓您終於可以建構您夢寐以求的線上報紙。
原生表單控制樣式 — 讓核取方塊、選項按鈕和檔案輸入與您的品牌相符，無需重新發明輪子。
列印修改器 — 直接從您的 HTML 控制您的網站列印時的外觀。
現代長寬比 API — 不再需要補白技巧，除非您需要支援 Safari 14，而您可能需要，但仍然可以。
精美的底線樣式 — 讓您的副專案終於起飛的缺失環節。
RTL 和 LTR 修改器 — 用於在建構多向網站時進行完整控制。
直向和橫向修改器 — 老實說，只是因為它們真的很容易新增。
任意屬性 — 現在 Tailwind 支援我們從未聽過的 CSS 屬性。
Play CDN — 新的即時引擎壓縮成 CDN 腳本，可在瀏覽器中直接執行。
大量其他公用程式 — 包括對 touch-action、will-change、flex-basis、text-indent、scroll-behavior 等的支援。

此外，還有一個精美的全新文件網站，每頁都載入改進的內容和範例。

若要立即開始使用 Tailwind CSS v3.0，請從 npm 取得最新版本

npm install -D tailwindcss@latest postcss autoprefixer

...或前往 Tailwind Play，直接在瀏覽器中試用最新功能。

Tailwind CSS v3.0 是該架構的新主要版本，其中有一些小的重大變更，但我們已盡力使升級過程盡可能順利，對於大多數專案，您應該可以在不安裝任何變更的情況下安裝 v3.0。

例如，Tailwind UI 可能是地球上最大的 Tailwind 專案，每個範本都完全與 v2 和 v3 相容，無需任何變更。

如需有關遷移至 v3.0 的更多詳細資訊和逐步說明，請查看升級指南。

即時 (Just-in-Time)，隨時可用

早在三月份，我們就推出了全新的即時引擎，它帶來了巨大的效能提升，解鎖了令人興奮的新功能，例如任意值，並使複雜的變體組態成為過去。

在 Tailwind CSS v3.0 中，新引擎已趨於穩定並取代了傳統引擎，因此每個 Tailwind 專案都可以開箱即用地受益於這些改進。

開箱即用，支援所有色彩

在新的引擎出現之前，我們始終必須謹慎處理開發中的 CSS 檔案大小，而我們必須做出的最大權衡之一是仔細限制調色盤。

在 v3.0 中，預設會啟用擴展調色盤中的每個顏色，包括萊姆色、青色、天藍色、紫紅色、玫瑰色和五十種深淺不同的灰色。

請查看調色盤參考以瞭解更多資訊。

捲動捕捉 API

我們新增了一組全面的 CSS 捲動捕捉模組公用程式，讓您能夠直接在 HTML 中建構非常豐富的捲動捕捉體驗

在影像網格中捲動以查看預期的行為

從新的捲動邊界公用程式開始，並逐步了解整個 API 以瞭解更多資訊。

多欄式佈局

我們新增了對欄的支援 — 報紙佈局的那種。這些實際上超級有用，並且對於頁尾導覽佈局之類的項目也很有用。

Expedita quo ea quod laborum ullam ipsum enim. Deleniti commodi et. Nam id laborum placeat natus eum. Aliquid aut aut soluta nesciunt culpa magni. Velit possimus autem et aut repudiandae culpa rerum. Qui blanditiis ut qui quia expedita necessitatibus sed. Autem sed ut saepe doloremque aut placeat voluptas ipsum.

Eligendi error nisi recusandae velit numquam nihil aperiam enim. Eum et molestias. Id qui cum veritatis id ea quidem ea rerum saepe. Iste itaque fugiat sequi. Voluptatem quae minus. Maxime ullam ea praesentium recusandae vero est quas. Quia minima fugiat aut laborum impedit facere autem sit qui. Et eos et ullam necessitatibus. Ut voluptatem saepe natus itaque maiores sit repellat aut natus assumenda.

Blanditiis ipsa officia dolores exercitationem nemo beatae voluptatem eos rerum velit asperiores. Non quisquam accusantium officia nisi eius necessitatibus.

Quaerat quia ad voluptatem laudantium natus. Aut ipsa et numquam delectus aliquam. Recusandae libero consequatur dolorum. Animi culpa rerum molestiae ut non et molestias aliquid aut nemo. Sint dolorem dolorem. Iure dolorum amet ea sit perferendis.

Et illum ut officia nisi commodi. Quia et mollitia possimus modi. Delectus aliquid quam eos consectetur.

Accusantium et et qui non sed modi. Corrupti deserunt culpa eos vitae neque aperiam. Repellat tenetur fugit.

Deleniti distinctio ad corrupti nisi. Mollitia qui est natus cumque. Officia dolor qui perferendis necessitatibus saepe excepturi asperiores quos voluptas. Est suscipit facere nihil expedita suscipit quibusdam. Quod cupiditate vero distinctio. Sed est soluta nostrum magnam et saepe blanditiis aut. Vero dolores repellendus et libero minima explicabo provident. Culpa aut dolorem est.

<div class="columns-1 sm:columns-3 ...">  <p>...</p>  <!-- ... --></div>

請參閱欄 (columns) 文件，並查看新的break-after/inside/before工具程式。

原生表單控制樣式

我們新增了對新的 accent-color 屬性的支援，以及用於設定檔案輸入按鈕樣式的修飾符，讓您比以往更容易在原生表單控制項上加入個人風格

<form>  <div class="flex items-center space-x-6">    <div class="shrink-0">      <img        class="h-16 w-16 rounded-full object-cover"        src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"        alt="Current profile photo"      />    </div>    <label class="block">      <span class="sr-only">Choose profile photo</span>      <input        type="file"        class="block w-full text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100"      />    </label>  </div>  <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-slate-600">    <input type="checkbox" class="accent-violet-500" checked />    <span>Yes, send me all your stupid updates</span>  </label></form>

請參閱強調色 (accent color) 和檔案輸入按鈕文件。

列印修飾符

新的 print 修飾符可讓您設定網站印出來時的樣式，給~~動物~~人們列印時參考

<div>  <article class="print:hidden">    <h1>My Secret Pizza Recipe</h1>    <p>This recipe is a secret, and must not be shared with anyone</p>    <!-- ... -->  </article>  <div class="hidden print:block">Are you seriously trying to print this? It's secret!</div></div>

我會說「請參閱列印樣式文件」，但這並非事實。

現代化的長寬比 API

我們新增了對新的原生 aspect-ratio 屬性的支援，該屬性開始獲得穩定的瀏覽器支援

<iframe class="aspect-video w-full ..." src="https://www.youtube.com/..."></iframe>

請參閱長寬比 (aspect ratio) 文件。

精美的底線樣式

現在您可以變更底線顏色、粗細等

我是 Derek，一位駐紮在塔圖因的太空工程師。我喜歡在我的公司 (My Company, Inc)建造 X 翼戰機。工作之餘，我喜歡觀看飛梭賽並進行光劍戰鬥。

<p>  I’m Derek, an astro-engineer based in Tatooine. I like to build X-Wings at  <a href="#" class="underline decoration-sky-500 decoration-2"> My Company, Inc </a>. Outside of work, I like to{" "}  <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2"> watch pod-racing </a> and have  <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2"> light-saber </a>{" "} fights.</p>

請參閱文字裝飾顏色 (text decoration color)、文字裝飾樣式 (text decoration style)、文字裝飾粗細 (text decoration thickness) 和文字底線偏移 (text underline offset) 文件。

RTL 和 LTR 修飾符

我們透過新的 rtl 和 ltr 修飾符新增了對多向版面配置的實驗性支援

由左至右

Tom Cook

營運總監

由右至左

تامر كرم

執行長

<div class="group flex items-center">  <img class="h-12 w-12 shrink-0 rounded-full" src="..." alt="" />  >  <div class="ltr:ml-3 rtl:mr-3">    <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p>    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p>  </div></div>

請參閱RTL 支援文件。

直向和橫向修飾符

當檢視區處於特定方向時，使用新的 portrait 和 landscape 修飾符有條件地新增樣式

<div>  <div class="portrait:hidden">    <!-- ... -->  </div>  <div class="landscape:hidden">    <p>This experience is designed to be viewed in landscape. Please rotate your device to view the site.</p>  </div></div>

關於此功能的文件甚至比這篇文章的本節內容還要少。

任意屬性

這可能不合法，但我們允許新增完全任意的 CSS，您可以將其與 hover、lg 和任何其他修飾符結合使用

<div class="[mask-type:luminance] hover:[mask-type:alpha]">  <!-- ... --></div>

這是內嵌樣式長大後會想成為的樣子。請參閱任意屬性文件以瞭解詳情。

Play CDN

無法為 Tailwind CSS v3.0 建立合理的 CSS 型 CDN 版本，因此我們必須採取不同的方法 – 我們建立了一個 JavaScript 程式庫。

<!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.com/"></script>  </head>  <body>    <!-- -->  </body></html>

將該腳本標籤新增至任何 HTML 文件，您就可以在瀏覽器中直接使用每個 Tailwind 功能。這僅用於開發目的，但這確實是一種建置小型示範或開發新想法的有趣方式。

請參閱Play CDN文件。

就這樣 – Tailwind CSS v3.0！前往新的文件網站，立即開始使用它。

如需每個單一變更的完整清單，請查看 GitHub 上的更新日誌。

將我們所有的更新直接發送到您的收件匣。註冊我們的電子報。

將我們所有的更新直接發送到您的收件匣。
註冊我們的電子報。