入門（Getting Started）
了解瀏覽器支援和與其他工具的相容性。
Tailwind CSS v4.0 專為現代瀏覽器設計和測試，框架的核心功能特別依賴這些瀏覽器版本：
Tailwind 還包含對許多前沿平台功能的支援，如 field-sizing: content、@starting-style 和 text-wrap: balance，這些功能的瀏覽器支援有限。 It's up to you if you want to use these modern features in your projects — if the browsers you're targeting don't support them, simply don't use those utilities and variants.
如果你不確定某個現代平台功能的支援情況，Can I use 資料庫是一個很好的資源。
Tailwind CSS v4.0 是一個功能完整的 CSS 建構工具，專為特定工作流程設計，並非設計用於與 Sass、Less 或 Stylus 等 CSS 預處理器一起使用。
把 Tailwind CSS 本身當作你的預處理器——你不應該將 Tailwind 與 Sass 一起使用，就像你不會將 Sass 與 Stylus 一起使用一樣。
由於 Tailwind 是為現代瀏覽器設計的，你實際上不需要預處理器來處理巢狀或變數等功能，而且 Tailwind 本身會處理匯入打包和新增供應商前綴等事項。
Tailwind 會自動打包你使用 @import 包含的其他 CSS 檔案，無需單獨的預處理工具。
@import "tailwindcss";@import "./typography.css";在這個範例中，typography.css 檔案會由 Tailwind 為你打包到編譯後的 CSS 中，無需 Sass 或 postcss-import 等其他工具。
所有現代瀏覽器都支援原生 CSS 變數，無需任何預處理器：
.typography { font-size: var(--text-base); color: var(--color-gray-700);}Tailwind 內部大量依賴 CSS 變數，因此如果你可以在專案中使用 Tailwind，你就可以使用原生 CSS 變數。
在底層，Tailwind 使用 Lightning CSS 來處理像這樣的巢狀 CSS：
.typography { p { font-size: var(--text-base); } img { border-radius: var(--radius-lg); }}Tailwind 會為你展平巢狀 CSS，以便所有現代瀏覽器都能理解：
.typography p { font-size: var(--text-base);}.typography img { border-radius: var(--radius-lg);}原生 CSS 巢狀支援現在也非常好，所以即使你不使用 Tailwind，也不真的需要預處理器來處理巢狀。
在 Tailwind 中，你過去可能使用迴圈產生的那類類別（如 col-span-1、col-span-2 等）會由 Tailwind 在你使用時隨需產生，而不需要預先定義。
除此之外，當你使用 Tailwind CSS 建構東西時，你的絕大多數樣式都在 HTML 中完成，而不是在 CSS 檔案中。既然你一開始就沒有撰寫大量的 CSS，你也就不需要像迴圈這樣專為程式化產生大量自訂 CSS 規則而設計的功能。
使用 Sass 或 Less 等預處理器時，你可能使用過 darken 或 lighten 等函式來調整顏色。
使用 Tailwind 時，建議的工作流程是使用預定義的調色盤，其中包含每種顏色的淺色和深色色調，就像框架附帶的精心設計的預設調色盤。
<button class="bg-indigo-500 hover:bg-indigo-600 ..."> <!-- ... --></button>你也可以使用現代 CSS 功能如 color-mix() 在瀏覽器中直接於執行時調整顏色。這甚至讓你可以調整使用 CSS 變數或 currentcolor 關鍵字定義的顏色，這在預處理器中是不可能的。
同樣地，瀏覽器現在也原生支援 min()、max() 和 round() 等數學函式，所以這些功能也不再需要依賴預處理器了。
Tailwind 與 CSS 模組相容，如果你正在將 Tailwind 引入已使用 CSS 模組的專案，它們可以共存，但如果可以避免的話，我們不建議將 CSS 模組與 Tailwind 一起使用。
CSS 模組旨在解決作用域問題，但當你在 HTML 中組合通用類別而不是撰寫自訂 CSS 時，這些問題根本不存在。
使用 Tailwind 時樣式是自然作用域化的，因為每個通用類別無論在哪裡使用都始終做相同的事情——不會有在 UI 的某個部分新增通用類別卻在其他地方產生意外副作用的風險。
使用 CSS 模組時，Vite、Parcel 和 Turbopack 等建構工具會分別處理每個 CSS 模組。這意味著如果你的專案有 50 個 CSS 模組，Tailwind 需要執行 50 次，這會導致建構時間大幅變慢和更差的開發體驗。
由於 CSS 模組是分別處理的，除非你匯入一個，否則它們沒有 @theme。
這意味著像 @apply 這樣的功能不會如你預期般運作，除非你明確將全域樣式作為參照匯入：
將你的全域樣式作為參照匯入，以確保你的主題變數已定義
@reference "../app.css";button { @apply bg-blue-500;}或者，你也可以直接使用 CSS 變數而不是 @apply，這有一個額外的好處是讓 Tailwind 跳過處理這些檔案，從而提升你的建構效能：
button { background: var(--color-blue-500);}Vue、Svelte 和 Astro 支援元件檔案中的 <style> 區塊，其行為與 CSS 模組非常相似，這意味著它們都由你的建構工具完全分開處理，並具有所有相同的缺點。
如果你將 Tailwind 與這些工具一起使用，我們建議避免在元件中使用 <style> 區塊，而是直接在標記中使用通用類別來設定樣式，這正是 Tailwind 應該被使用的方式。
如果你確實使用 <style> 區塊，如果你希望 @apply 等功能按預期運作，請確保將全域樣式作為參照匯入：
將你的全域樣式作為參照匯入，以確保你的主題變數已定義
<template> <button><slot /></button></template><style scoped> @reference "../app.css"; button { @apply bg-blue-500; }</style>或者直接使用你全域定義的 CSS 變數，而不是像 @apply 這樣的功能，這根本不需要 Tailwind 處理你的元件 CSS：
<template> <button><slot /></button></template><style scoped> button { background-color: var(--color-blue-500); }</style>