WorksheetsSoal Pilihan Ganda Tailwind CSS
Total questions: 10
Worksheet time: 5mins
Apa itu Tailwind CSS?
Framework CSS berbasis komponen.
Framework CSS berbasis utility-first.
Framework CSS untuk animasi.
Framework CSS untuk responsivitas saja.
Bagaimana cara mengubah warna teks menjadi merah menggunakan Tailwind CSS?
`class="text-red"`
`class="text-red-500"`
`class="text-red-700"`
`class="text-danger"`
Kelas apa yang digunakan untuk membuat teks menjadi **tebal**?
`class="font-weight-bold"`
`class="font-semibold"`
`class="font-bold"`
`class="text-bold"`
Manakah utility class untuk membuat elemen menjadi center secara horizontal dan vertikal dalam flexbox?
`class="center"`
`class="items-center justify-center"`
`class="align-middle justify-middle"`
`class="center-middle"`
Apa fungsi dari `container` di Tailwind CSS?
Membuat layout responsif dengan lebar dinamis.
Menambahkan margin otomatis ke elemen.
Mengatur padding ke elemen.
Membuat elemen menjadi fixed width.
Bagaimana cara menambahkan padding sebesar 4 unit di seluruh sisi elemen?
`class="pad-4"`
`class="padding-4"`
`class="p-4"`
`class="pt-4 pb-4 pl-4 pr-4"`
Utility class untuk membuat elemen memiliki bayangan kecil adalah:
`class="shadow-small"`
`class="shadow-md"`
`class="shadow-sm"`
`class="shadow-light"`
Bagaimana cara mengatur elemen menjadi grid dengan 3 kolom menggunakan Tailwind CSS?
`class="grid-cols-3"`
`class="grid-3"`
`class="columns-3"`
`class="grid grid-cols-3"`
Kelas apa yang digunakan untuk menyembunyikan elemen tetapi tetap menggunakannya dalam aksesibilitas (screen readers)?
`class="hidden"`
`class="invisible"`
`class="sr-only"`
`class="opacity-0"`
Bagaimana cara membuat elemen menjadi responsif hanya di layar berukuran besar (lg)?
`class="large:text-lg"`
`class="lg:text-lg"`
`class="md:text-lg lg:text-lg"`
`class="text-lg-only"`
