样式

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">
        标题、说明和按钮只用类名来设置样式。
      </p>
      <button className="mt-4 rounded-lg bg-black px-4 py-2 text-sm text-white hover:bg-gray-700">
        了解更多
      </button>
    </div>
  )
}