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

Tailwind CSS 4.0 新特性

• 性能提升： 使用全新的高性能引擎 Oxide，它從頭開始編寫，以提高構建速度?；鶞蕼y試顯示全量構建速度提升超 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 怎么用？

準備工作

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

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

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

npx tailwindcss init

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

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

• 創建全局樣式表： 創建一個CSS文件（例如 ./src/input.css），并在其中引入 Tailwind CSS 的基礎樣式、組件樣式以及實用類。

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

• 構建 CSS 文件：確保構建工具（如 Webpack、Vite 等）能夠處理 PostCSS，需要設置 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 類：現在就可以在HTML中使用Tailwind提供的工具類了。

import React from 'react';

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

export default 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（最大寬度為中等屏幕大?。┑取?/li>
• 高度類：如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動態地切換暗黑模式。這通常涉及到監聽用戶的偏好設置或提供一個手動切換按鈕。

function toggleDarkMode() {
  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 可以輕松地折疊這些類名，使代碼更加簡潔明了。

圖片