Latihan 1 dari materi Tailwind Config & Kustomisasi di Tailwind CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya blok <style type="text/tailwindcss"> dengan @theme yang masih kosong, dan kartu tanpa class: <div id="card"> berisi <h2 id="title">Custom Card</h2> dan <p id="desc">Dengan warna kustom</p>. Biarkan id dan teksnya.
@theme, daftarkan dua warna: --color-kartu: #1e293b; dan --color-redup: #94a3b8;.<div id="card">: p-6 rounded-xl shadow-lg bg-kartu.<h2 id="title">: text-xl font-bold text-white.<p id="desc">: mt-2 text-redup.Yang dicek:
#card persis 24px (dari p-6), border-radius-nya 12px (dari rounded-xl), dan font-weight #title 700 (dari font-bold)#card memakai class bg-kartu, dan #desc memakai text-redup#card rgb(30, 41, 59) (yaitu #1e293b) dan teks #desc rgb(148, 163, 184) (yaitu #94a3b8). Warna itu cuma muncul kalau token @theme-nya benar, karena bg-kartu dan text-redup lahir dari token itu.Bayangan dan class teks lainnya bikin kartunya rapi, tapi gak ikut dicek.
