Latihan 1: Custom Values — Tailwind CSS

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

Kode awal sudah punya <div id="custom"> berisi teks Custom Size, biarkan id dan teksnya.

Tambahkan atribut class ke <div id="custom">.
Isi dengan tiga class: w-[200px] h-[60px] bg-blue-500.

Yang dicek di #custom:

elemennya ada
width persis 200px (dari w-[200px])
height persis 60px (dari h-[60px])

Tulis lebar dan tingginya pakai kurung siku, lengkap dengan px. Editor latihan memakai Tailwind v4, sama seperti Playground, jadi w-50 dan h-15 dari skala v4 juga memberi 200px dan 60px dan ikut lolos. Tapi latihan ini soal kurung siku, jadi coba bentuk itu. bg-blue-500 bikin kotaknya kelihatan, tapi gak ikut dicek.

Hint

Nilai yang gak ada di skala Tailwind ditulis di dalam kurung siku, tepat setelah nama utilitasnya, dan isinya disalin apa adanya ke CSS.
Lebar pakai w-, tinggi pakai h-, dan angkanya di dalam kurung siku lengkap dengan satuan px. Warnanya cukup bg-blue-500 dari palet.
<div id="custom" class="w-[200px] h-[60px] bg-blue-500">Custom Size</div>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Custom Values — Tailwind CSS

Hint

Memperbarui Aplikasi