Soal Pilihan Ganda Tailwind CSS

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"`