レッスン一覧 · レッスン 1/3

Foundations · レッスン 1/3

Utility-First in Practice

Style a button with small single-purpose classes instead of writing custom CSS.

1分 コメント0件

Each utility class does one thing: px-5 adds horizontal padding, rounded-full rounds the corners. Combine them and you have a component.

<button class="rounded-full bg-pink-500 px-5 py-2 font-semibold text-white hover:bg-pink-600">Save</button>

Why it works

You never have to invent class names, and changing one button never breaks another page.

ディスカッション

コメントするにはログインしてください。 ログイン

まだディスカッションはありません。最初の質問をしてみましょう。