1 月 22 日，Tailwind CSS 正式發(fā)布了 4.0 版本！作為全球最火的 CSS 框架（沒有之一），Tailwind CSS 每周的下載量近 1200 萬次。本文將簡單介紹 Tailwind CSS 4.0 的新特性，并分享它的使用方法！

Tailwind CSS 4.0 新特性

• 性能提升： 使用全新的高性能引擎 Oxide，它從頭開始編寫，以提高構(gòu)建速度?；鶞?zhǔn)測試顯示全量構(gòu)建速度提升超 3.5 倍 ，增量構(gòu)建速度提升超 8 倍，無新 CSS 的增量構(gòu)建速度提升 182 倍。
• 更好的配置體驗(yàn)：

CSS 優(yōu)先配置：從 JavaScript 配置文件（tailwind.config.js）改為直接在 CSS 文件中使用 @theme 指令進(jìn)行配置，簡化了項(xiàng)目文件結(jié)構(gòu)。

簡化主題配置：減少主題配置工作量，部分實(shí)用工具和變體無需配置即可使用，使主題配置更聚焦于關(guān)鍵設(shè)計(jì)標(biāo)記。

• 功能增強(qiáng)
• CSS 主題變量：設(shè)計(jì)標(biāo)記默認(rèn)作為 CSS 變量，方便在運(yùn)行時(shí)引用，用于內(nèi)聯(lián)樣式或傳遞給動(dòng)畫庫。
• 原生 CSS 層疊層：使用真實(shí) CSS 層疊層，更易控制樣式優(yōu)先級和交互，減少代碼維護(hù)量。
• 自動(dòng)源檢測：自動(dòng)檢測內(nèi)容源，忽略.gitignore中的文件和二進(jìn)制文件，可通過@source指令添加默認(rèn)排除的源。
• 內(nèi)置導(dǎo)入支持：無需額外插件即可處理@import，與引擎緊密集成，速度更快。
• 內(nèi)置 CSS 轉(zhuǎn)譯：生產(chǎn)構(gòu)建時(shí)自動(dòng)通過 Lightning CSS 處理供應(yīng)商前綴、現(xiàn)代特性轉(zhuǎn)譯、壓縮等，可移除相關(guān)工具。
• 新功能特性
• 動(dòng)態(tài)間距比例：從單一間距比例值派生多種間距實(shí)用工具，可自定義或禁用默認(rèn)間距變量。
• 現(xiàn)代化 P3 顏色調(diào)色板：默認(rèn)顏色調(diào)色板從rgb升級到oklch，色彩更鮮艷，升級項(xiàng)目時(shí)顏色平衡保持一致。
• 簡化變量顏色：借助color-mix()函數(shù)，定義顏色變量更簡單，不透明度修飾符自動(dòng)生效。
• 容器查詢支持：核心支持容器查詢，無需額外插件，新增@max-*變體，可堆疊變體定義查詢范圍。
• 3D 變換：添加 3D 變換 API，如旋轉(zhuǎn)、縮放、平移等，可控制透視和背面可見性。
• 多種梯度增強(qiáng)：線性梯度支持角度值，新增梯度插值修飾符，添加圓錐和徑向梯度實(shí)用工具。
• 新增實(shí)用工具類：包括inset-shadow-*、inset-ring-*、field-sizing-*、color-scheme-*、font-stretch-*等，滿足不同場景需求。
• 變體增強(qiáng)：可組合變體，新增@starting-style、not-*、inert、nth-*、in-*等變體，open變體支持:popover-open偽類。
• 后代變體：新增**變體，用于選擇所有后代元素，結(jié)合其他變體可精準(zhǔn)篩選。

Tailwind CSS 是什么？

Tailwind CSS 是一個(gè)實(shí)用類優(yōu)先的 CSS 框架。與傳統(tǒng)的 CSS 框架不同，它不提供預(yù)設(shè)的設(shè)計(jì)組件（如按鈕、表格等），而是將 CSS 拆分成最小的、可復(fù)用的單元，即原子類。每個(gè)原子類只負(fù)責(zé)一個(gè)樣式屬性，這樣可以完全根據(jù)自己的設(shè)計(jì)需求來構(gòu)建界面，而不會受到框架本身樣式的限制。

Tailwind CSS 的特點(diǎn)如下：

• 實(shí)用程序優(yōu)先：提供了一套低級別的CSS工具類，可以直接應(yīng)用于 HTML，從而構(gòu)建任何設(shè)計(jì)。這種方式與傳統(tǒng)的預(yù)設(shè)組件的框架不同，可以創(chuàng)建完全自定義的設(shè)計(jì)。
• 響應(yīng)式設(shè)計(jì)：內(nèi)置了對響應(yīng)式設(shè)計(jì)的支持，可以通過添加前綴的方式輕松地調(diào)整不同屏幕尺寸下的樣式。
• 高度可定制：Tailwind CSS 高度可配置，通過配置文件可以修改或擴(kuò)展默認(rèn)的樣式選項(xiàng)。這包括但不限于顏色、字體系列、間距、斷點(diǎn)等，可以根據(jù)項(xiàng)目的需要定制化設(shè)計(jì)系統(tǒng)。
• 插件生態(tài)系統(tǒng)：Tailwind CSS 擁有豐富的官方和社區(qū)貢獻(xiàn)的插件，這些插件可以進(jìn)一步擴(kuò)展其功能，提供額外的工具類或者幫助處理復(fù)雜的UI需求。
• 一致的設(shè)計(jì)語言：使用Tailwind CSS有助于在整個(gè)項(xiàng)目中維持一致的設(shè)計(jì)語言，因?yàn)樗械臉邮蕉际腔谝粋€(gè)統(tǒng)一的命名約定和配置。
• 快速原型開發(fā)：對于快速原型開發(fā)和迭代設(shè)計(jì)來說，Tailwind CSS的工具類可以迅速實(shí)現(xiàn)想法，而無需編寫大量的CSS代碼。

舉個(gè)例子，傳統(tǒng)的 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 中，同樣的設(shè)計(jì)可以直接使用實(shí)用類實(shí)現(xiàn)：

<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 怎么用？

準(zhǔn)備工作

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

# 使用 npm 安裝
npm install tailwindcss
# 使用 yarn 安裝
yarn add tailwindcss

• 初始化配置文件： 在終端中通過以下命令來生成 Tailwind CSS 的配置文件tailwind.config.js。

npx tailwindcss init

• 配置 Tailwind CSS：根據(jù)項(xiàng)目需求配置tailwind.config.js文件。例如，指定 Tailwind 應(yīng)該掃描哪些文件以提取類名，或者自定義主題顏色、字體等。

module.exports = {
  content: [
    "./src/**/*.{html,js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {}, // 主題配置
  },
  plugins: [], // 添加插件
}

• 創(chuàng)建全局樣式表： 創(chuàng)建一個(gè)CSS文件（例如 ./src/input.css），并在其中引入 Tailwind CSS 的基礎(chǔ)樣式、組件樣式以及實(shí)用類。

@tailwind base;
@tailwind components;
@tailwind utilities;

• 構(gòu)建 CSS 文件：確保構(gòu)建工具（如 Webpack、Vite 等）能夠處理 PostCSS，需要設(shè)置 Tailwind CSS 作為插件。例如，如果使用的是 Vite，可以在 vite.config.js文件中添加以下配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from 'tailwindcss';

export default defineConfig({
  plugins: [react()],
  css: {
    postcss: {
      plugins: [tailwindcss()],
    },
  },
});

• 使用 Tailwind CSS 類：現(xiàn)在就可以在HTML中使用Tailwind提供的工具類了。

import React from 'react';

function App() {
  return (
    <div className="bg-blue-500 text-white p-4">
      Hello, 前端充電寶!
    </div>
  );
}

export default App;

實(shí)用功能

實(shí)用程序類

Tailwind CSS 的核心理念是提供一組低級別的實(shí)用程序類，這些類可以用來直接在HTML中構(gòu)建完全自定義的設(shè)計(jì)，而無需編寫額外的CSS。

常用的 Tailwind CSS 類如下：

• 布局類

容器類：如container，用于創(chuàng)建響應(yīng)式的容器，它會根據(jù)屏幕大小自動(dòng)調(diào)整寬度。

彈性布局類：如flex、flex-col（垂直排列）、flex-row（水平排列）、flex-wrap（換行）、flex-nowrap（不換行）等，用于創(chuàng)建彈性布局。

網(wǎng)格布局類：如grid、grid-cols-3（3列網(wǎng)格）、grid-rows-2（2行網(wǎng)格）、gap-4（網(wǎng)格項(xiàng)間距為4）等，用于創(chuàng)建網(wǎng)格布局。

對齊類：如items-center（垂直居中）、justify-center（水平居中）、center（水平和垂直居中）等，用于控制元素的對齊方式。

• 間距類
• 外邊距類：如m-4（外邊距為4）、mt-2（頂部外邊距為2）、mr-auto（右側(cè)外邊距為自動(dòng)）等。
• 內(nèi)邊距類：如p-2（內(nèi)邊距為2）、py-4（垂直方向內(nèi)邊距為4）、px-auto（水平方向內(nèi)邊距為自動(dòng)）等。
• X軸間距類：如mx-auto（水平方向外邊距為自動(dòng)）、px-4（水平方向內(nèi)邊距為4）等。
• Y軸間距類：如my-6（垂直方向外邊距為6）、py-auto（垂直方向內(nèi)邊距為自動(dòng)）等。
• 尺寸類
• 寬度類：如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（文本大小為小號字體）等。
• 字體粗細(xì)類：如font-bold（使用粗體字體）、font-light（使用細(xì)體字體）等。
• 行間距類：如leading-6（行間距為6）等。
• 背景類
• 背景顏色類：如bg-gray-300（背景顏色為灰色300）等。
• 背景圖片類：如bg-cover（使用覆蓋整個(gè)元素的背景圖片）等。
• 背景位置類：如bg-center（背景圖像居中對齊）等。
• 背景尺寸類：如bg-auto（使用原始背景圖像大?。┑?。
• 邊框類
• 邊框顏色類：如border-red-500（邊框顏色為紅色500）等。
• 邊框大小類：如border-2（邊框?qū)挾葹?像素）等。
• 邊框位置類：如border-l（只在元素左側(cè)添加邊框）等。
• 圓角類：如rounded-full（使用完全圓角）等。
• 其他類
• 陰影類：如shadow-lg（添加大號陰影效果）等。
• 過渡與動(dòng)畫類：如transition-all（全部過渡效果）、duration-1000（過渡時(shí)長為1000毫秒）、ease-in-out（過渡曲線為先慢后快再慢）等。
• 響應(yīng)式前綴類：如md:（中等屏幕及以上尺寸的前綴）、lg:（大屏幕及以上尺寸的前綴）等，用于實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)。

暗黑模式

Tailwind CSS 提供了對暗黑模式的原生支持，可以輕松地為應(yīng)用添加深色主題。

要啟用暗黑模式，首先需要在 tailwind.config.js 文件中進(jìn)行配置。Tailwind 提供了三種方式來處理暗黑模式：

• media：默認(rèn)選項(xiàng)，基于用戶的系統(tǒng)偏好（prefers-color-scheme）自動(dòng)切換暗黑模式。當(dāng)用戶的系統(tǒng)設(shè)置為暗黑模式時(shí)，Tailwind CSS 會自動(dòng)應(yīng)用帶有 dark: 前綴的樣式類。
• class：通過手動(dòng)添加 dark 類來切換暗黑模式。這種模式允許開發(fā)者通過 JavaScript 或其他方式動(dòng)態(tài)地添加或移除 dark 類，從而實(shí)現(xiàn)用戶控制的暗黑模式切換。
• false：禁用暗黑模式。

// tailwind.config.js
module.exports = {
  darkMode: 'class', // 或者 'media' 或 false
  theme: {
    extend: {},
  },
  plugins: [],
}

當(dāng)啟用了暗黑模式，可以使用 dark: 前綴來為特定元素指定在暗黑模式下的樣式。這適用于任何 Tailwind 的工具類。

<!-- 在暗黑模式下背景為黑色，文本為白色 -->
<div class="bg-white text-black dark:bg-gray-900 dark:text-white">
  Hello World
</div>

如果選擇了 darkMode: 'class'，可以通過JavaScript動(dòng)態(tài)地切換暗黑模式。這通常涉及到監(jiān)聽用戶的偏好設(shè)置或提供一個(gè)手動(dòng)切換按鈕。

function toggleDarkMode() {
  document.documentElement.classList.toggle('dark');
}

// 監(jiān)聽用戶系統(tǒng)偏好
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark');
}

響應(yīng)式

Tailwind CSS 可以通過簡單的類名組合來快速創(chuàng)建適應(yīng)不同屏幕尺寸和設(shè)備的布局。Tailwind CSS提供了豐富的響應(yīng)式工具類，可以為不同設(shè)備指定特定樣式。這些響應(yīng)式類通常基于屏幕寬度斷點(diǎn)來應(yīng)用不同的樣式規(guī)則。

• 內(nèi)置的響應(yīng)式斷點(diǎn)： Tailwind CSS 中的默認(rèn)斷點(diǎn)包括：

sm: - 小型屏幕（最小寬度為 640px）

md: - 中型屏幕（最小寬度為 768px）

lg: - 大型屏幕（最小寬度為 1024px）

xl: - 超大型屏幕（最小寬度為 1280px）

2xl: - 非常大的屏幕（最小寬度為 1536px）

• 響應(yīng)式定義： 可以將這些前綴添加到任何 Tailwind 工具類之前，以指定在特定屏幕尺寸下應(yīng)用的樣式。響應(yīng)式類的語法通常為{斷點(diǎn)}:屬性-[值]，例如md:w-[8%]表示在中等屏幕上寬度設(shè)為8%。

<!-- 默認(rèn)情況下是紅色，在中等及以上屏幕變?yōu)榫G色 -->
<div class="bg-red-500 md:bg-green-500">
  Hello World
</div>

• 自定義斷點(diǎn)： 如果默認(rèn)的斷點(diǎn)不滿足需求，可以在 tailwind.config.js 文件中自定義或擴(kuò)展它們。

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

• 使用容器類：為了確保頁面內(nèi)容在一個(gè)固定的寬度內(nèi)居中，并且隨著屏幕尺寸的變化自動(dòng)調(diào)整寬度，可以使用 Tailwind 的 container 類。這個(gè)類會根據(jù)當(dāng)前屏幕尺寸自動(dòng)調(diào)整最大寬度，并保持水平居中。

<div class="container mx-auto">
  <!-- 頁面內(nèi)容 -->
</div>

• 流體布局與固定寬度： Tailwind 還提供了流體布局和固定寬度的工具類。例如，w-full 類可以使元素寬度占滿父元素，而 max-w-lg 類則可以限制元素的最大寬度。

<!-- 寬度占滿父元素，但在大屏幕時(shí)不超過最大寬度 -->
<div class="w-full max-w-lg">
  <!-- 內(nèi)容 -->
</div>

主題

Tailwind CSS 主題是指基于預(yù)定義樣式類所創(chuàng)建的一組特定的樣式集合，用于定義應(yīng)用的整體視覺風(fēng)格。

在 Tailwind CSS 中，主題的配置主要通過修改 tailwind.config.js 文件來實(shí)現(xiàn)。這個(gè)文件包含了 Tailwind CSS 的核心配置選項(xiàng)，如顏色、間距、斷點(diǎn)、字體等。通過調(diào)整這些配置選項(xiàng)，可以定制自己的主題風(fēng)格。

• 顏色配置：在 tailwind.config.js 文件中，可以定義自己的顏色調(diào)色板，并指定這些顏色在 Tailwind CSS 中的使用方式。例如，可以定義主色調(diào)、輔助色調(diào)、背景色等，并指定它們在按鈕、鏈接、文本等元素上的應(yīng)用方式。
• 間距配置：間距配置允許定義一系列預(yù)定義的間距值，這些值可以在布局和組件中使用。通過調(diào)整間距配置，可以控制元素之間的間距大小，從而優(yōu)化頁面的整體布局和視覺效果。
• 斷點(diǎn)配置：斷點(diǎn)配置用于定義響應(yīng)式設(shè)計(jì)的斷點(diǎn)。通過指定不同的屏幕尺寸和視口寬度，可以為不同的設(shè)備和屏幕大小設(shè)置不同的樣式規(guī)則。這有助于確保網(wǎng)頁在各種設(shè)備上都能正常顯示和交互。
• 字體配置：字體配置允許指定應(yīng)用中使用的字體類型、字體大小和字體樣式等。通過調(diào)整字體配置，可以創(chuàng)建出符合品牌風(fēng)格和用戶體驗(yàn)需求的字體樣式。

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

在配置了 Tailwind CSS 主題之后，可以在 HTML 中使用這些預(yù)定義的樣式類來應(yīng)用主題樣式。例如，可以使用顏色類來設(shè)置元素的背景顏色和文本顏色，使用間距類來控制元素之間的間距大小，使用布局類來定義頁面的整體布局結(jié)構(gòu)等。

Tailwind CSS 插件

Tailwind CSS 插件系統(tǒng)可以擴(kuò)展 Tailwind 的核心功能，添加新的工具類、修改現(xiàn)有行為或引入完全自定義的樣式。

官方提供了幾個(gè)非常有用的插件來擴(kuò)展 Tailwind 的功能：

• @tailwindcss/forms：為表單元素提供額外的樣式和實(shí)用程序。
• @tailwindcss/typography：用于創(chuàng)建美觀的排版，包含對文章內(nèi)容的優(yōu)化樣式。
• @tailwindcss/aspect-ratio：提供 aspect-ratio 實(shí)用程序，用于保持元素的比例。
• @tailwindcss/line-clamp：提供一個(gè)簡單的解決方案來限制文本行數(shù)。
• @tailwindcss/container-queries：實(shí)現(xiàn)基于容器查詢的功能，允許根據(jù)容器大小調(diào)整樣式。

除此之外，Tailwind 提供了簡單的方法來創(chuàng)建自定義插件。這可以通過 plugin 函數(shù)完成，它接受兩個(gè)參數(shù)：一個(gè)是添加到設(shè)計(jì)系統(tǒng)的函數(shù)，另一個(gè)是可選的默認(rèn)配置對象。例如，添加兩個(gè)新的工具類：

const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({ addUtilities }) {
      addUtilities({
        '.content-auto': {
          'content-visibility': 'auto',
        },
        '.content-visible': {
          'content-visibility': 'visible',
        },
      })
    }),
  ],
}

要在項(xiàng)目中使用插件，需要將它們添加到 tailwind.config.js 文件中的 plugins 數(shù)組里。

module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    // 添加其他插件
  ],
}

VS Code 插件

Tailwind CSS 官方提供了一個(gè) VS Code 插件——Tailwind CSS IntelliSense，它提供了自動(dòng)完成、語法突出顯示和 linting 等高級功能以增強(qiáng) Tailwind 開發(fā)體驗(yàn)。

圖片

另外，推薦一個(gè)第三方的 VS Code 插件——Inline Fold，它的核心功能是將匹配的內(nèi)容折疊成單行，從而提高代碼的可讀性和整潔度。這對于處理包含大量類名或?qū)傩缘拇a行特別有用，例如在使用 Tailwind CSS 時(shí)，類名可能會非常長且復(fù)雜，導(dǎo)致代碼視覺結(jié)構(gòu)混亂。通過 Inline Fold 可以輕松地折疊這些類名，使代碼更加簡潔明了。

圖片