樣式

Tailwind CSS ／ CSS Modules ／ styled-components

比較效果

用每個函式庫做了同樣的東西，動手試試看。

Tailwind CSS

CSS Modules

styled-components

比較程式碼

修改程式碼，右邊的預覽會跟著變化。

export default function App() {
  return (
    <div className="m-4 rounded-xl border p-6">
      <h2 className="text-lg font-semibold">我的第一張卡片</h2>
      <p className="mt-2 text-sm text-gray-500">
        標題、說明和按鈕只用 class 名稱來設定樣式。
      </p>
      <button className="mt-4 rounded-lg bg-black px-4 py-2 text-sm text-white hover:bg-gray-700">
        了解更多
      </button>
    </div>
  )
}