剛學 Tailwind 要知道的事-瀏覽器的樣式被清掉

說明

剛學習 Tailwind 安裝後，你會發現 h1, h2 這些樣式都不見了，本篇將告訴大家原因以及建議。

原因

首先這是 Tailwind 有意這樣處理的，不是 Bug，旨在消除跨瀏覽器的不一致性，讓開發者能在設計系統的約束下更輕鬆地工作。

參考: https://tailwindcss.com/docs/preflight

建議

以 h1, h2 樣式為例，如果你還是希望 h1, h2 有不同的大小的話，可以使用 @layer base，這是 Tailwind 提供的指令，為特定 HTML 元素新增自己的預設基本樣式。

參考: https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles

@layer base {
  h1 {
    @apply text-4xl font-bold;
  }

  h2 {
    @apply text-3xl font-bold;
  }

  h3 {
    @apply text-2xl font-bold;
  }

  h4 {
    @apply text-xl font-bold;
  }

  h5 {
    @apply text-lg font-bold;
  }

  h6 {
    @apply text-base font-bold;
  }
}

另一個做法是自己寫前端的組件，提供較大的彈性，但維護成本可能會比較高。

大概如下，程式碼需自行調整。

import { LabelHTMLAttributes } from 'react';

export default function H1({
    className = '',
    children,
    ...props
}: LabelHTMLAttributes<HTMLLabelElement>) {
    return (
        <h1
            {...props}
            className={'text-4xl font-bold ' + className}
        >
            {children}
        </h1>
    );
}