Tailwind CSS 就在這裡：你需要知道什麼

Tailwind CSS 4.0 是一個遊戲規則改變者，它簡化了 Web 開發，並顯著提高了速度和可用性。 此版本提供更快的建置、簡化的設定和增強的自訂選項，使其比以前更強大。 我個人在 UserJot 和 LogSnag 等專案中廣泛使用了 Tailwind，我對這些更新感到非常興奮。

讓我們來探索一下主要功能：

氧化物引擎：極快的性能

Tailwind 的核心已使用 Rust 完全重寫，從而產生了速度顯著加快的 Oxide 引擎。

• 完整建置：建置時間加快 5 倍。
• 漸進式建置：針對微小變更的重建速度提高 100 倍以上 – 近乎即時更新。

這意味著等待時間顯著減少，尤其是對於大型專案。

統一工具鏈：簡單有效率

Tailwind 4.0 直接與 Lightning CSS 集成，無需使用 PostCSS、Autoprefixer 或 postcss-import 等單獨工具。

• 簡化的設定：更少的配置，更少的依賴項。
• 一體化功能：自動瀏覽器前綴和 CSS 導入處理。

例如，匯入 CSS 檔案現在非常簡單：

<code>@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";</code>

無需額外配置。

CSS優先配置：直覺的客製化

配置從 JavaScript 轉變為 CSS，允許在 CSS 檔案中直接自訂樣式。

• 更清晰的客製化：有關樣式變更的即時視覺回饋。
• 直覺的工作流程：更自然的 CSS 修改方法。

在 CSS 中使用 tailwind.config.js 指令來取代 @theme：

<code>@theme {
  --color-primary: oklch(0.84 0.18 117.33);
  --font-sans: "Inter", sans-serif;
}</code>

原生級聯層：有組織的樣式

CSS @layer 規則增強樣式組織並防止衝突。

• 改進的特異性控制： 精確管理樣式優先權。
• 增強的風格管理：更清晰的分離和更容易的衝突解決。

範例：定義元件層：

<code>@layer components {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white;
  }
}</code>

容器查詢：響應式設計演進

根據容器的大小，而不僅僅是螢幕大小來設定元素的樣式。

• 上下文感知樣式：樣式動態適應上下文。
• 更靈活的佈局：創造具有更強適應性的響應式設計。

例：適應其容器的網格：

<code class="language-html"><div>
  <!-- Grid adapts to container size -->
</div></code>

可組合變體：高級樣式組合

新的變體組合方法提供了更好的風格控制。

• 增強控制：基於複雜條件設計元素。
• 改進的互動性：使用更少的 JavaScript 建立互動式 UI。

範例：基於父級懸停的樣式：

<code>@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";</code>

零設定內容偵測：自動檔案掃描

Tailwind 自動偵測內容文件，無需手動設定。

• 簡化設定：無需手動內容路徑配置。
• 減少錯誤：減少因配置錯誤而導致的樣式遺漏。

Tailwind 自動掃描 HTML 檔案並套用樣式。

現代 Web 功能：尖端 CSS 支援

支援進階 CSS 功能，例如 @starting-style、color-mix 和 @property。

• 擴充功能：利用最新的 CSS 技術。
• 面向未來：維持與不斷發展的網路標準的兼容性。

範例：使用 @property 製作動畫：

<code>@theme {
  --color-primary: oklch(0.84 0.18 117.33);
  --font-sans: "Inter", sans-serif;
}</code>

Tailwind CSS 4.0 顯著增強了速度、簡單性和功能。 這些改進簡化了工作流程並支援創建複雜的網頁設計。 請造訪 Tailwind CSS 官方網站了解更多詳情。

以上是Tailwind CSS 就在這裡：你需要知道什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！