我們剛剛發布了 Tailwind CSS v1.9，它增加了對配置預設、實用的新 CSS 網格工具、擴展的邊框半徑、旋轉和傾斜比例、有用的輔助功能改進等等！
讓我們深入了解重點...
如需完整的變更摘要，請查看 GitHub 上的版本說明。
配置預設
Tailwind CSS v1.9 在 tailwind.config.js 檔案中新增了一個 presets 鍵，讓您可以為您的專案配置一個自訂的「基本配置」。
module.exports = { presets: [require("@my-company/tailwind-base")], theme: { extend: { // Project specific overrides... }, },};您在 presets 下提供的任何內容都會取代預設的 Tailwind 基本配置，因此您可以定義自己的完全自訂的起點。如果您是團隊的一員，該團隊在多個不同的 Tailwind 專案上工作，而這些專案都需要共用相同的品牌顏色、字型自訂或間距比例，這會非常有用。
您甚至可以列出多個預設，它們會從上到下合併
module.exports = { presets: [require("@my-company/tailwind-base"), require("@my-company/tailwind-marketing")], theme: { extend: { // Project specific overrides... }, },};將您的專案特定配置與自訂基本配置合併的邏輯，與預設配置的工作方式完全相同，因此所有您習慣使用的功能（如 extend）仍然可以完全按照您的預期方式工作。
grid-auto-columns 和 grid-auto-rows 的工具
我們新增了新的 gridAutoColumns 和 gridAutoRows 核心外掛程式，它們分別為 grid-auto-columns 和 grid-auto-rows CSS 屬性新增了新的工具。
這些工具可讓您控制隱式建立的網格欄和列的大小。每當您沒有為網格指定欄/列數時，請使用它們來設定預設的欄/列大小。
<div class="grid auto-cols-max grid-flow-col"> <div>1</div> <div>2</div> <div>3</div></div>以下是預設包含的新工具清單
| 類別 | CSS |
|---|---|
auto-cols-auto | grid-auto-columns: auto; |
auto-cols-min | grid-auto-columns: min-content; |
auto-cols-max | grid-auto-columns: max-content; |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr); |
auto-rows-auto | grid-auto-rows: auto; |
auto-rows-min | grid-auto-rows: min-content; |
auto-rows-max | grid-auto-rows: max-content; |
auto-rows-fr | grid-auto-rows: minmax(0, 1fr); |
我們預設包含這些工具的 responsive 變體，而且可以像您在 tailwind.config.js 檔案的 gridAutoColumns 和 gridAutoRows 區段下預期的一樣進行配置。
焦點指示器改進和可配置的輪廓
我們已更新 outline-none 類別，使其預設呈現透明輪廓，而不是呈現無輪廓。這對於使用Windows 高對比模式的人員來說非常有用，在這種模式下，基於自訂 box-shadow 的焦點樣式完全不可見。
現在，您可以使用 box shadow 安全地建立自訂焦點樣式，而不會讓視力不佳的人員難以使用您的網站。
<button class="focus:shadow-outline focus:outline-none ..."> <!-- ... --></button>我們還新增了兩種新的輪廓樣式：outline-white 和 outline-black。
這些工具會以各自的顏色呈現 2px 點狀輪廓，並帶有 2px 的偏移。它們可以作為通用的不顯眼焦點指示器，讓鍵盤使用者可以輕鬆看到螢幕上選取了哪個元素，而不會與您的設計過於衝突。
我們同時包含了 white 和 black 變體，因此您可以隨時確保有一個選項可用，以針對您使用的任何背景顏色具有足夠的對比度。
<!-- Use `outline-white` on dark backgrounds --><div class="bg-gray-900"> <button class="focus:outline-white ..."> <!-- ... --> </button></div><!-- Use `outline-black` on light backgrounds --><div class="bg-white"> <button class="focus:outline-black ..."> <!-- ... --> </button></div>當然，您也可以自由使用背景顏色、box shadow、邊框等來建立任何您喜歡的自訂焦點樣式。如果您不想太花俏，這些就很棒了。
我們也讓 outline 屬性可以設定，因此您現在可以在 tailwind.config.js 檔案中定義自訂輪廓
module.exports = { theme: { extend: { outline: { blue: "2px solid #0000ff", }, }, },};您也可以使用 [outline, outlineOffset] 形式的元組，為任何自訂輪廓工具提供 outline-offset 值
module.exports = { theme: { extend: { outline: { blue: ["2px solid #0000ff", "1px"], }, }, },};擴展的邊框半徑、旋轉和傾斜比例
我們預設新增了三個新的邊框半徑工具
| 類別 | 值 |
|---|---|
rounded-xl | 0.75rem(12px) |
rounded-2xl | 1rem(16px) |
rounded-3xl | 1.5rem(24px) |
...以及針對 rotate 和 skew 工具的一組擴展的較小值
| 類別 | 值 |
|---|---|
rotate-1 | 1deg |
rotate-2 | 2deg |
rotate-3 | 3deg |
rotate-6 | 6deg |
rotate-12 | 12deg |
skew-1 | 1deg |
skew-2 | 2deg |
所有這些也都包含負數版本。對於更細微的旋轉和傾斜效果非常方便！
升級
Tailwind CSS v1.9 是非破壞性的次要版本，因此要升級，您只需執行
# npmnpm install tailwindcss@^1.9# yarnyarn add tailwindcss@^1.9我們已將兩個先前實驗性的功能 (defaultLineHeights 和 standardFontWeights) 升級到 future，因此我們也建議現在選擇加入這些變更，以簡化今年秋季稍後升級到 Tailwind CSS v2.0 的過程。
想討論這篇文章嗎？在 GitHub 上討論 →