Devsaurus

    Search by
       /belajar-coding/build-app

    Terakhir diperbaharui: Dec 23, 2020

    Update User Interface (Tailwind CSS)

    Langkah Improve App selanjutnya yang akan kita lakukan adalah update UI atau view dari aplikasi DinoTes.

    Tujuan dari update UI disini adalah untuk mendukung fitur yang akan kita tambahkan pada chapter selanjutnya, yaitu search & sorting.

    Kita juga akan menambahkan CSS framework bernama Tailwind CSS, sebuah framewok dengan konsep utility class yang akan membuat pekerjaan mendesain UI dari web menjadi lebih mudah dan cepat.

    Hasil akhir dari update UI:

    dinotes final ui

    Tailwind CSS

    Tailwind CSS adalah ‘utility-first’ CSS framework yang digunakan untuk membuat User Interface(UI) atau desain dengan cepat.

    Selanjutnya kita akan gunakan istilah tailwindcss untuk meringkas penyebutan Tailwind CSS.

    Yang dimaksud dengan ‘utility-first’ adalah tailwindcss menyediakan banyak utility class yang dapat digunakan untuk membuat custom desain tanpa harus menulis CSS.

    Contoh:

    Membuat button menggunakan CSS.

    index.html

    1<link rel="stylesheet" type="text/css" href="styles.css" />
    2<body>
    3  <button class="button">Klik Disini</button>
    4</body>

    styles.css

    1.button {
    2  background: #7c3aed;
    3  color: #ffffff;
    4  padding: 0.25rem 1rem;
    5  border-width: 1px;
    6  border-radius: 0.25rem;
    7}
    8.button:hover {
    9  background: #5b21b6;
    10}

    Membuat button menggunakan tailwindcss:

    index.html

    1<body>
    2  <button
    3    class="bg-purple-500 text-white 
    4  py-1 px-4 
    5  border rounded hover:bg-purple-800"
    6  >
    7    Klik Disini
    8  </button>
    9</body>

    Dengan tailwindcss, kita tidak perlu menulis CSS untuk menentukan style dari button, cukup menggunakan utility class seperti bg-purple-500, text-white dll.

    Konsep Dasar

    Kita akan bahas beberapa konsep dasar pada tailwindcss. Tidak semuanya, tapi dengan memahami konsep ini kamu sudah bisa mulai menggunakan tailwindcss.

    Utility First

    Tailwindcss menggunakan utility class atau helper class seperti bg-purple-500 untuk membuat custom desain "menggantikan" CSS.

    Kita lihat code sebelumnya:

    1<body>
    2  <button
    3    class="bg-purple-500 text-white 
    4   py-1 px-4 
    5   border rounded hover:bg-purple-800"
    6  >
    7    Klik Disini
    8  </button>
    9</body>

    Utility class yang ada pada code di atas:

    • bg-purple-500, mewakili atau mempresentasikan CSS properties background: #7C3AED;
    • text-white, mempresentasikan properties color: #ffffff;
    • py-1 px-4, mempresentasikan properties padding:0.25rem 1rem;
    • border, mempresentasikan properties border-width:1px;
    • rounded, mempresentasikan properties border-radius: 0.25rem;

    Bagi yang sudah terbiasa dengan CSS, menggunakan utility class membutuhkan penyesuaian.

    Misalnya untuk mengatur besarnya font pada CSS kita bisa gunakan properties font-size dan ukuran font ditentukan dengan angka dalam satuan px, em atau rem.

    Pada tailwindcss, kita harus memilih utility class yang sesuai.

    utility class list

    Begitu juga dengan warna, tailwindcss sudah menyediakan palet siap pakai.

    tailwind css color palette

    Responsive Design

    Membuat desain yang responsif menggunakan tailwindcss sangat mudah, tailwindcss menyediakan lima breakpoints yang dapat kita gunakan bersamaan dengan utility class.

    tailwind css responsive design

    Contoh penggunaan:

    1<div class="text-base md:text-lg"></div>

    Ukuran font pada element div tersebut adalah 1rem dan akan berubah menjadi 1.125rem pada resolusi layar berukuran atau lebih besar dari 768px.

    Pseudo Class

    Pseudo-class digunakan untuk mengatur tampilan dari suatu element HTML pada kondisi(state) tertentu.

    Contohnya, kita bisa mengubah warna dari suatu link pada kondisi hover (mouse di atas link) menggunakan CSS properties

    1a:hover { color: #FF00FF; }

    Pada tailwindcss, pseudo-class dilakukan dengan menambahkan state sebelum utility class.

    1<button
    2  class="bg-purple-500 text-white 
    3py-1 px-4 
    4border rounded hover:bg-purple-800"
    5>
    6  Klik Disini
    7</button>

    Warna background dari button akan berubah dari #8B5CF6 (bg-purple-500) menjadi #5B21B6 (bg-purple-800) saat hover.

    Base Styles

    Base atau global style adalah style yang diterapkan untuk semua element HTML.

    Ketika tailwindcss ditambahkan ke suatu project, secara default tailwindcss akan menerapkan base style yang disebut preflight.

    Contoh aturan atau style yang ada di dalam preflight adalah semua element heading dibuat tidak memiliki styled (unstyled) dan memiliki ukuran yang sama dengan ukuran teks biasa.

    1h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }

    Bagaimana jika kita ingin mengubah base style ini?

    Caranya kita bisa tambahkan custom style pada file CSS.

    Pada sebuah CRA project, kita bisa override base style dengan menambah custom style pada file index.css.

    1@tailwind base;
    2@tailwind components;
    3@tailwind utilities;
    4
    5@layer base {
    6  h1 {
    7    @apply text-2xl;
    8  }
    9  h2 {
    10    @apply text-xl;
    11  }
    12}

    Ukuran font semua element h1 akan menjadi 1.5rem, dan element h2 akan menjadi 1.25rem.

    Daftar lengkap dari utility class dapat ditemukan di halaman dokumentasi official tailwind.