全球最火開源CSS框架——TailwindCSS4.0正式釋出

2025-05-07 02:45 OSC開源社群

OSCHINA
↑點選藍字 關注我們
1 月 22 日，Tailwind CSS 正式釋出了 4.0 版本！
下載地址：

https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0

遷移指南：

https://tailwindcss.com/docs/upgrade-guide

文件：https://tailwindcss.com/docs/installation/using-vite

作為全球最火的 CSS 框架（沒有之一），Tailwind CSS 每週的下載量近 1200 萬次。本文將簡單介紹 Tailwind CSS 4.0 的新特性，並分享它的使用方法！

Tailwind CSS 4.0 新特性

  • 效能提升： 使用全新的高效能引擎 Oxide，它從頭開始編寫，以提高構建速度。基準測試顯示全量構建速度提升超 3.5 倍 ，增量構建速度提升超 8 倍，無新 CSS 的增量構建速度提升 182 倍。
  • 更好的配置體驗：
    • CSS 優先配置：從 JavaScript 配置檔案（tailwind.config.js）改為直接在 CSS 檔案中使用 @theme 指令進行配置，簡化了專案檔案結構。
    • 簡化主題配置：減少主題配置工作量，部分實用工具和變體無需配置即可使用，使主題配置更聚焦於關鍵設計標記。
  • 功能增強
    • CSS 主題變數：設計標記預設作為 CSS 變數，方便在執行時引用，用於內聯樣式或傳遞給動畫庫。
    • 原生 CSS 層疊層：使用真實 CSS 層疊層，更易控制樣式優先順序和互動，減少程式碼維護量。
    • 自動源檢測：自動檢測內容源，忽略.gitignore中的檔案和二進位制檔案，可透過@source指令新增預設排除的源。
    • 內建匯入支援：無需額外外掛即可處理@import，與引擎緊密整合，速度更快。
    • 內建 CSS 轉譯：生產構建時自動透過 Lightning CSS 處理供應商字首、現代特性轉譯、壓縮等，可移除相關工具。
  • 新功能特性
    • 動態間距比例：從單一間距比例值派生多種間距實用工具，可自定義或停用預設間距變數。
    • 現代化 P3 顏色調色盤：預設顏色調色盤從rgb升級到oklch，色彩更鮮豔，升級專案時顏色平衡保持一致。
    • 簡化變數顏色：藉助color-mix()函式，定義顏色變數更簡單，不透明度修飾符自動生效。
    • 容器查詢支援：核心支援容器查詢，無需額外外掛，新增@max-*變體，可堆疊變體定義查詢範圍。
    • 3D 變換：新增 3D 變換 API，如旋轉、縮放、平移等，可控制透視和背面可見性。
    • 多種梯度增強：線性梯度支援角度值，新增梯度插值修飾符，新增圓錐和徑向梯度實用工具。
    • 新增實用工具類：包括inset-shadow-*、inset-ring-*、field-sizing-*、color-scheme-*、font-stretch-*等，滿足不同場景需求。
    • 變體增強：可組合變體，新增@starting-style、not-*、inert、nth-*、in-*等變體，open變體支援:popover-open偽類。
    • 後代變體：新增**變體，用於選擇所有後代元素，結合其他變體可精準篩選。

Tailwind CSS 是什麼？

Tailwind CSS 是一個實用類優先的 CSS 框架。與傳統的 CSS 框架不同，它不提供預設的設計元件（如按鈕、表格等），而是將 CSS 拆分成最小的、可複用的單元，即原子類。每個原子類只負責一個樣式屬性，這樣可以完全根據自己的設計需求來構建介面，而不會受到框架本身樣式的限制。
Tailwind CSS 的特點如下：
  • 實用程式優先：提供了一套低級別的CSS工具類，可以直接應用於 HTML，從而構建任何設計。這種方式與傳統的預設元件的框架不同，可以建立完全自定義的設計。
  • 響應式設計：內建了對響應式設計的支援，可以透過新增字首的方式輕鬆地調整不同螢幕尺寸下的樣式。
  • 高度可定製：Tailwind CSS 高度可配置，透過配置檔案可以修改或擴充套件預設的樣式選項。這包括但不限於顏色、字體系列、間距、斷點等，可以根據專案的需要定製化設計系統。
  • 外掛生態系統：Tailwind CSS 擁有豐富的官方和社群貢獻的外掛，這些外掛可以進一步擴充套件其功能，提供額外的工具類或者幫助處理複雜的UI需求。
  • 一致的設計語言：使用Tailwind CSS有助於在整個專案中維持一致的設計語言，因為所有的樣式都是基於一個統一的命名約定和配置。
  • 快速原型開發：對於快速原型開發和迭代設計來說，Tailwind CSS的工具類可以迅速實現想法，而無需編寫大量的CSS程式碼。
舉個例子，傳統的 CSS 這樣寫：
<div class="card">
<h2 class="title">

Hello, World!

</h2>
<p class="content">

前端充電寶

</p>
</div>

.card{
padding:1rem;
background-color:#f9fafb;
border-radius:0.5rem;
}
.title{
font-size:1.25rem;
font-weight:

bold

;
margin-bottom:0.5rem;
}
.content{
font-size:1rem;
color:#6b7280;
}

在 Tailwind CSS 中，同樣的設計可以直接使用實用類實現：
<div class="p-4 bg-gray-100 rounded-lg">
<h2 class="text-xl font-bold mb-2">

Hello, World!

</h2>
<p class="text-gray-600">

前端充電寶

</p>
</div>

Tailwind CSS 怎麼用？

準備工作

  1. 安裝 Tailwind CSS：在使用之前，在終端中使用 npm 或 yarn 等工具來安裝 Tailwind CSS：
# 使用 npm 安裝
npminstall

tailwindcss

# 使用 yarn 安裝
yarnadd

tailwindcss

  1. 初始化配置檔案： 在終端中透過以下命令來生成 Tailwind CSS 的配置檔案tailwind.config.js。

npx tailwindcss init

  1. 配置 Tailwind CSS：根據專案需求配置tailwind.config.js檔案。例如，指定 Tailwind 應該掃描哪些檔案以提取類名，或者自定義主題顏色、字型等。

module

.

exports

={
content:[
"./src/**/*.{html,js,jsx,ts,tsx}",
],
theme:{
extend:{},// 主題配置
},
plugins:[],// 新增外掛
}

  1. 建立全域性樣式表： 建立一個CSS檔案（例如 ./src/input.css），並在其中引入 Tailwind CSS 的基礎樣式、元件樣式以及實用類。

@tailwind base

;

@tailwind components

;

@tailwind utilities

;

  1. 構建 CSS 檔案：確保構建工具（如 Webpack、Vite 等）能夠處理 PostCSS，需要設定 Tailwind CSS 作為外掛。例如，如果使用的是 Vite，可以在 vite.config.js檔案中新增以下配置：
import{

defineConfig

}from'vite';
import

react

from'@vitejs/plugin-react';
import

tailwindcss

from'tailwindcss';
exportdefaultdefineConfig({
plugins:[react()],
css:{
postcss:{
plugins:[tailwindcss()],
},
},
});

  1. 使用 Tailwind CSS 類：現在就可以在HTML中使用Tailwind提供的工具類了。
import

React

from'react';
functionApp(){
return(
<

div className

="bg-blue-500 text-white p-4">

Hello

,

前端充電寶

!
</

div

>
);
}
exportdefault

App

;

實用功能

實用程式類

Tailwind CSS 的核心理念是提供一組低級別的實用程式類，這些類可以用來直接在HTML中構建完全自定義的設計，而無需編寫額外的CSS。
常用的 Tailwind CSS 類如下：
  • 佈局類
    • 容器類：如container，用於建立響應式的容器，它會根據螢幕大小自動調整寬度。
    • 彈性佈局類：如flex、flex-col（垂直排列）、flex-row（水平排列）、flex-wrap（換行）、flex-nowrap（不換行）等，用於建立彈性佈局。
    • 網格佈局類：如grid、grid-cols-3（3列網格）、grid-rows-2（2行網格）、gap-4（網格項間距為4）等，用於建立網格佈局。
    • 對齊類：如items-center（垂直居中）、justify-center（水平居中）、center（水平和垂直居中）等，用於控制元素的對齊方式。
  • 間距類
    • 外邊距類：如m-4（外邊距為4）、mt-2（頂部外邊距為2）、mr-auto（右側外邊距為自動）等。
    • 內邊距類：如p-2（內邊距為2）、py-4（垂直方向內邊距為4）、px-auto（水平方向內邊距為自動）等。
    • X軸間距類：如mx-auto（水平方向外邊距為自動）、px-4（水平方向內邊距為4）等。
    • Y軸間距類：如my-6（垂直方向外邊距為6）、py-auto（垂直方向內邊距為自動）等。
  • 尺寸類
    • 寬度類：如w-full（寬度為100%）、w-1/2（寬度為父容器寬度的一半）、max-w-md（最大寬度為中等螢幕大小）等。
    • 高度類：如h-screen（高度為螢幕高度）、h-16（高度為16畫素）、min-h-full（最小高度為100%）等。
  • 文字類
    • 文字顏色類：如text-red-500（文字顏色為紅色500）、text-black（文字顏色為黑色）等。
    • 文字大小類：如text-xl（文字大小為大號字型）、text-sm（文字大小為小號字型）等。
    • 字型粗細類：如font-bold（使用粗體字型）、font-light（使用細體字型）等。
    • 行間距類：如leading-6（行間距為6）等。
  • 背景類
    • 背景顏色類：如bg-gray-300（背景顏色為灰色300）等。
    • 背景圖片類：如bg-cover（使用覆蓋整個元素的背景圖片）等。
    • 背景位置類：如bg-center（背景影像居中對齊）等。
    • 背景尺寸類：如bg-auto（使用原始背景影像大小）等。
  • 邊框類
    • 邊框顏色類：如border-red-500（邊框顏色為紅色500）等。
    • 邊框大小類：如border-2（邊框寬度為2畫素）等。
    • 邊框位置類：如border-l（只在元素左側新增邊框）等。
    • 圓角類：如rounded-full（使用完全圓角）等。
  • 其他類
    • 陰影類：如shadow-lg（新增大號陰影效果）等。
    • 過渡與動畫類：如transition-all（全部過渡效果）、duration-1000（過渡時長為1000毫秒）、ease-in-out（過渡曲線為先慢後快再慢）等。
    • 響應式字首類：如md:（中等螢幕及以上尺寸的字首）、lg:（大螢幕及以上尺寸的字首）等，用於實現響應式設計。

暗黑模式

Tailwind CSS 提供了對暗黑模式的原生支援，可以輕鬆地為應用新增深色主題。
要啟用暗黑模式，首先需要在 tailwind.config.js 檔案中進行配置。Tailwind 提供了三種方式來處理暗黑模式：
  • media：預設選項，基於使用者的系統偏好（prefers-color-scheme）自動切換暗黑模式。當用戶的系統設定為暗黑模式時，Tailwind CSS 會自動應用帶有 dark: 字首的樣式類。
  • class：透過手動新增 dark 類來切換暗黑模式。這種模式允許開發者透過 JavaScript 或其他方式動態地新增或移除 dark 類，從而實現使用者控制的暗黑模式切換。
  • false：停用暗黑模式。
// tailwind.config.js

module

.

exports

={
darkMode:'class',// 或者 'media' 或 false
theme:{
extend:{},
},
plugins:[],
}

當啟用了暗黑模式，可以使用 dark: 字首來為特定元素指定在暗黑模式下的樣式。這適用於任何 Tailwind 的工具類。
<!-- 在暗黑模式下背景為黑色，文字為白色 -->
<div class="bg-white text-black dark:bg-gray-900 dark:text-white">

Hello World

</div>

如果選擇了 darkMode: 'class'，可以透過JavaScript動態地切換暗黑模式。這通常涉及到監聽使用者的偏好設定或提供一個手動切換按鈕。
functiontoggleDarkMode(){
document.

documentElement

.

classList

.toggle('dark');
}
// 監聽使用者系統偏好
if(window.

matchMedia

&&window.matchMedia('(prefers-color-scheme: dark)').

matches

){
document.

documentElement

.

classList

.add('dark');
}

響應式

Tailwind CSS 可以透過簡單的類名組合來快速建立適應不同螢幕尺寸和裝置的佈局。Tailwind CSS提供了豐富的響應式工具類，可以為不同裝置指定特定樣式。這些響應式類通常基於螢幕寬度斷點來應用不同的樣式規則。
  • 內建的響應式斷點： Tailwind CSS 中的預設斷點包括：
    • sm: – 小型螢幕（最小寬度為 640px）
    • md: – 中型螢幕（最小寬度為 768px）
    • lg: – 大型螢幕（最小寬度為 1024px）
    • xl: – 超大型螢幕（最小寬度為 1280px）
    • 2xl: – 非常大的螢幕（最小寬度為 1536px）
  • 響應式定義： 可以將這些字首新增到任何 Tailwind 工具類之前，以指定在特定螢幕尺寸下應用的樣式。響應式類的語法通常為{斷點}:屬性-[值]，例如md:w-[8%]表示在中等螢幕上寬度設為8%。
<!-- 預設情況下是紅色，在中等及以上螢幕變為綠色 -->
<div class="bg-red-500 md:bg-green-500">

Hello World

</div>

  • 自定義斷點： 如果預設的斷點不滿足需求，可以在 tailwind.config.js 檔案中自定義或擴充套件它們。

module

.

exports

={
theme:{
screens:{
'xs':'480px',
'sm':'640px',
'md':'768px',
'lg':'1024px',
'xl':'1280px',
'2xl':'1536px',
},
},
}

  • 使用容器類：為了確保頁面內容在一個固定的寬度內居中，並且隨著螢幕尺寸的變化自動調整寬度，可以使用 Tailwind 的 container 類。這個類會根據當前螢幕尺寸自動調整最大寬度，並保持水平居中。
<div class="container mx-auto">
<!-- 頁面內容 -->
</div>
  • 流體佈局與固定寬度： Tailwind 還提供了流體佈局和固定寬度的工具類。例如，w-full 類可以使元素寬度佔滿父元素，而 max-w-lg 類則可以限制元素的最大寬度。
<!-- 寬度佔滿父元素，但在大螢幕時不超過最大寬度 -->
<div class="w-full max-w-lg">
<!-- 內容 -->
</div>

主題

Tailwind CSS 主題是指基於預定義樣式類所建立的一組特定的樣式集合，用於定義應用的整體視覺風格。
在 Tailwind CSS 中，主題的配置主要透過修改 tailwind.config.js 檔案來實現。這個檔案包含了 Tailwind CSS 的核心配置選項，如顏色、間距、斷點、字型等。透過調整這些配置選項，可以定製自己的主題風格。
  • 顏色配置：在 tailwind.config.js 檔案中，可以定義自己的顏色調色盤，並指定這些顏色在 Tailwind CSS 中的使用方式。例如，可以定義主色調、輔助色調、背景色等，並指定它們在按鈕、連結、文字等元素上的應用方式。
  • 間距配置：間距配置允許定義一系列預定義的間距值，這些值可以在佈局和元件中使用。透過調整間距配置，可以控制元素之間的間距大小，從而最佳化頁面的整體佈局和視覺效果。
  • 斷點配置：斷點配置用於定義響應式設計的斷點。透過指定不同的螢幕尺寸和視口寬度，可以為不同的裝置和螢幕大小設定不同的樣式規則。這有助於確保網頁在各種裝置上都能正常顯示和互動。
  • 字型配置：字型配置允許指定應用中使用的字型型別、字型大小和字型樣式等。透過調整字型配置，可以創建出符合品牌風格和使用者體驗需求的字型樣式。
// tailwind.config.js

module

.

exports

={
theme:{
extend:{
colors:{
primary:'#3490dc',
secondary:'#ffed4a',
},
spacing:{
'96':'24rem',
'128':'32rem',
},
// 更多自定義...
}
}
}

在配置了 Tailwind CSS 主題之後，可以在 HTML 中使用這些預定義的樣式類來應用主題樣式。例如，可以使用顏色類來設定元素的背景顏色和文字顏色，使用間距類來控制元素之間的間距大小，使用佈局類來定義頁面的整體佈局結構等。

Tailwind CSS 外掛

Tailwind CSS 外掛系統可以擴充套件 Tailwind 的核心功能，新增新的工具類、修改現有行為或引入完全自定義的樣式。
官方提供了幾個非常有用的外掛來擴充套件 Tailwind 的功能：
  • @tailwindcss/forms：為表單元素提供額外的樣式和實用程式。
  • @tailwindcss/typography：用於建立美觀的排版，包含對文章內容的最佳化樣式。
  • @tailwindcss/aspect-ratio：提供 aspect-ratio 實用程式，用於保持元素的比例。
  • @tailwindcss/line-clamp：提供一個簡單的解決方案來限制文字行數。
  • @tailwindcss/container-queries：實現基於容器查詢的功能，允許根據容器大小調整樣式。
除此之外，Tailwind 提供了簡單的方法來建立自定義外掛。這可以透過 plugin 函式完成，它接受兩個引數：一個是新增到設計系統的函式，另一個是可選的預設配置物件。例如，新增兩個新的工具類：
const

plugin

=require('tailwindcss/plugin')

module

.

exports

={
plugins:[
plugin(function({

addUtilities

}){
addUtilities({
'.content-auto':{
'content-visibility':'auto',
},
'.content-visible':{
'content-visibility':'visible',
},
})
}),
],
}

要在專案中使用外掛，需要將它們新增到 tailwind.config.js 檔案中的 plugins 數組裡。

module

.

exports

={
content:['./src/**/*.{html,js,jsx,ts,tsx}'],
theme:{
extend:{},
},
plugins:[
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
// 新增其他外掛
],
}

VS Code 外掛

Tailwind CSS 官方提供了一個 VS Code 外掛——Tailwind CSS IntelliSense，它提供了自動完成、語法突出顯示和 linting 等高階功能以增強 Tailwind 開發體驗。
另外，推薦一個第三方的 VS Code 外掛——Inline Fold，它的核心功能是將匹配的內容摺疊成單行，從而提高程式碼的可讀性和整潔度。這對於處理包含大量類名或屬性的程式碼行特別有用，例如在使用 Tailwind CSS 時，類名可能會非常長且複雜，導致程式碼視覺結構混亂。透過 Inline Fold 可以輕鬆地摺疊這些類名，使程式碼更加簡潔明瞭。

🔗

《2024 中國開源開發者報告》正式釋出

https://talk.gitee.com/report/china-open-source-2024-annual-report.pdf


相關文章