Tailwind CSS? ???? ?????? HTML ? ? ?? ?? ????? ?? ???? ?? ??? ???? ??? ??? ?? ?????. ??? ??? ???, ??? ?? ??, ?? ??? ?? ? ?? ??? ?? ??? ??? ????? ?? ??????.

? ????? ?? ???? ??? ????, ?? ??? ???, ???? ???? ?? ??? ??? ? ???? ? ??? ?? 5?? ???? ?? ?????. ? ?? ???? ??? ?? ?? ??? Tailwind CSS ??? ????? ???? ? ??? ????.

1. ??? ??? ??: ??? ?? ???? ? ?? ??? ?????

Tailwind CSS ?? ??? ??? ???? ?? ???? ??? ??? ?????. ?? ??? ??? ??? ??? ?????. ?? ?? size ???? w- ? h- ??? ??? ? ??? ???? ??? ??? ??? ??? ? ????.

// 低效的類名使用 ?
<div className="w-16 h-16">{/* 內(nèi)容 */}</div>

// 使用簡寫類名 ?
<div className="size-16">{/* 內(nèi)容 */}</div>

????? p ? m ???? ?? ?? ? ?? ??? ??????.

2. ??? ??: ??? ??? ???? ??

Tailwind CSS? CSS ?? ???? ?? ???? ?? ?? ?? ?????. ?? ?? ?? CSS ??? ??? ??? ??? ??? ? ??? ?? ??(tailwind.config.js ?? tailwind.config.ts)?? ??? ???? ??? ???? ? ? ???? ?????.

?? ?? ????? ? ??? ???? ?????.

// 用于尺寸
<div className="w-[550px] h-[400px]">{/* 自定義尺寸 */} </div>

// 也適用于顏色
<div className="bg-[#ff6347]">{/* 使用十六進(jìn)制顏色碼的自定義顏色 */} </div>

// 自定義值的錯誤用法！CSS 規(guī)則無效 ?
// 將顏色應(yīng)用于寬度屬性，無效
<div className="w-[#333]"></div>

3. ?? ??: ??? ??? ?? ???? ???

Tailwind? ??? prose ???? ??, ???, ?? ? ??? ???? ????? ??????. ??, ??, ??, ??? ??? ?????? ?? ????? prose ???? ????? ?? ???? ?????? ??? ?? ? ????. prose ???? CMS ?? ???, ???? ?? ??? ? ?? ???? ??????.

?:

// prose 類也包含自定義類！
<div className="prose prose-sm md:prose-base lg:prose-xl dark:prose-invert prose-h1:font-extrabold">
  <h1>我的博客文章</h1>
  <p>這是一個使用 prose 類快速設(shè)置樣式的示例。</p>
  <ul><li>TailwindCSS 速度快</li>
    <li>它是實用優(yōu)先的</li>
    <li>它高度可定制</li>
  </ul></div>

prose ???? ?? ??, ? ??, ?? ?? ?? ?????? ???? ???? ?????. ??? ?? tailwind.config.js ???? ??? ??? ??? ? ????. prose ???? ????? ??? ??? ???? ???? @tailwindcss/typography? ???? plugins ??? ???? ???.

npm install @tailwindcss/typography

4. ??? ??? ??

?? ??? ????? ??? ??? ??? ?? Tailwind CSS? ???? ??, ??, ?? ?? ?? ???? ???? ??? ???? ??? ? ????. tailwind.config.js ??? ??? ???? ??? ??? ???? ?? ?????? ???? ???? ???? ??? ? ????.

?? ?? ??? ?? ??? ?? ??? ??? ? ????.

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1D4ED8', // 藍(lán)色
        secondary: '#F59E0B', // 黃色
      },
    },
  },
}

?? ?? ??? ?? ?? ???? ??? ?? ??? ??? ? ????.

// 低效的類名使用 ?
<div className="w-16 h-16">{/* 內(nèi)容 */}</div>

// 使用簡寫類名 ?
<div className="size-16">{/* 內(nèi)容 */}</div>

? ?? ??? ???? ??? ???? ???? ?? ???? ??? ??? ???? ???? ??? ?????? ???? ???? ?? ????? ? ????. ?? ?? ???? ?? ???? ?? ?? ?? ?????? ?? ?????(????? ?? ? ??? ?? ?????).

5. ?? ????: ?? ?? ??

Tailwind CSS? ???? ?? ????? ??? ??? ??? ? ????. ?? ?? ??? ????? Tailwind?? ???? ?? ???? ???? ??? ? ?? ?????.

??? ???? ????? ?? ??? ??? ??? ?? ?? ??? ??? ?? ???? HanaTones? ????.

// 用于尺寸
<div className="w-[550px] h-[400px]">{/* 自定義尺寸 */} </div>

// 也適用于顏色
<div className="bg-[#ff6347]">{/* 使用十六進(jìn)制顏色碼的自定義顏色 */} </div>

// 自定義值的錯誤用法！CSS 規(guī)則無效 ?
// 將顏色應(yīng)用于寬度屬性，無效
<div className="w-[#333]"></div>

? ??? ?? ????? tailwind.config.js? ???? ??? ???? ???? ??? ??? ??? ??? ??? ? ????. ? ?? ??? ?? ?????? ??? ?? ???? ??? ??? ? ????.

??? ??? ?? ????? ???? CSS ??? ??? ??? Tailwind CSS? ??? ??? ? ???? ?? ??? ??? ???? ???? ??? ??? ???.

??

Tailwind CSS? ?? ?????? ??? ?? ?? ? ?? ???? ???? ?? CSS ????????. ?? ??? ??, ??? ?? ?, prose ???, ??? ?? ??? ???, ??? ?? ????? ???? ?? ??? ????? ???? ???? ?? ???? ?? ?? ??? ??? ?????? ???? ? ? ??? ? ????.

?? ? ?? ???? ???? ? ????? ? ??? ???? ? ???? ?? ???? ?? ??? ??? ? ?? ? ????. Tailwind CSS? ???? ?? ??? ??? ?? ???? ??? ???? ? ??? ? ????.

?????( ???) と

? ??? ??? ? ??? ?? ??? TailwindCSS ?? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!