Latihan 1: Apa itu Tailwind CSS? — Tailwind CSS

Latihan 1 dari materi Apa itu Tailwind CSS? di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Ubah <div> di starter jadi kartu Tailwind pertamamu:

Biarkan teks Kartu Pertamaku di dalamnya.
Tambahkan atribut class ke <div> itu: class="p-4 bg-white rounded-lg".
Jangan pakai atribut style sama sekali, semua gayanya lewat class.

Yang dicek:

Padding div-nya 16px di semua sisi (p-4).
Sudutnya membulat 8px (rounded-lg).
Atribut class-nya berisi class padding (seperti p-4) dan class rounded.
Gak ada atribut style="..." di kodenya.

<div>-nya juga harus punya class bg-white (latar putih), supaya kelihatan seperti kartu.

Hint

Di Tailwind, tampilan datang dari class di atribut class. Tiap class mengerjakan satu hal: satu untuk padding, satu untuk latar, satu untuk sudut.
Angka di nama class itu langkah 4px, jadi padding 16px = p-4. Sudut 8px = rounded-lg. Latar putih = bg-white. Ketiganya ditulis di atribut class div-nya.
<div class="p-4 bg-white rounded-lg">Kartu Pertamaku</div>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Apa itu Tailwind CSS? — Tailwind CSS

Hint

Memperbarui Aplikasi