Styling dengan Utility Class dalam Tailwind CSS

byInzaghi's Blog Admin -
0

Hello guys! Tailwind CSS merupakan Framework CSS yang banyak digunakan di Aplikasi Web Modern saat ini. Kali ini kita akan membuat Program Styling dengan Utility Class dalam Tailwind CSS.

Sumber : Tutorialspoint.com


Prinsip Dasar Utility-First dalam Tailwind CSS mengacu pada penggunaan kumpulan kelas kecil yang memiliki satu fungsi spesifik untuk menata elemen langsung di dalam HTML.

Alih-alih menulis kode CSS khusus untuk setiap elemen, Anda dapat menggunakan kelas utilitas bawaan (predefined utility classes) untuk menghasilkan tampilan yang diinginkan dengan cepat dan efisien.

<!DOCTYPE html>
<html lang="en">
<head> 
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f7fafc;
            margin: 0;
        }
        .container {
            width: 100%;
            max-width: 900px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .description {
            text-align: center;
            margin-bottom: 40px;
            color: #2d3748;
        }
        .description p {
            font-size: 20px;
            margin-bottom: 16px;
        }
        .description ul {
            list-style-type: disc;
            padding-left: 20px;
            text-align: left;
            color: #4a5568;
        }
        .description li {
            margin-bottom: 8px;
        }
        .description li strong {
            font-weight: bold;
        }
        .completed {
            color: #48bb78;
        }
        .current {
            color: #ecc94b;
        }
        .upcoming {
            color: #e2e8f0;
        }
        .tracker {
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        .tracker::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: calc(100% - 40px); 
            height: 4px; 
            background: linear-gradient(to right, #48bb78 25%, #ecc94b 25% 50%, #e2e8f0 50% 75%, #e2e8f0 75%);
            z-index: 1;
        }
        .step {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 2;
            margin: 0 15px;  
        }
        .step div {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 8px;
            font-size: 24px;  
        }
        .step:nth-child(1) div {
            background-color: #48bb78; /* Completed */
        }
        .step:nth-child(2) div {
            background-color: #ecc94b; /* Current */
        }
        .step:nth-child(3) div {
            background-color: #e2e8f0; /* Upcoming */
        }
        .step:nth-child(4) div {
            background-color: #e2e8f0; /* Upcoming */
        }
        .step span {
            display: block;
            font-size: 16px;
            color: #4a5568;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="description">
            <p>This tracker shows your progress through different stages:</p>
            <ul>
                <li><strong class="completed">Completed:</strong> Finished steps</li>
                <li><strong class="current">Current:</strong> The active step</li>
                <li><strong class="upcoming">Upcoming:</strong> Future steps</li>
            </ul>
        </div>
        <div class="tracker">
            <div class="step">
                <div>✓</div>
                <span>Step 1</span>
            </div>
            <div class="step">
                <div>▶</div>
                <span>Step 2</span>
            </div>
            <div class="step">
                <div>•</div>
                <span>Step 3</span>
            </div>
            <div class="step">
                <div>•</div>
                <span>Step 4</span>
            </div>
        </div>
    </div>
</body>

</html>

Biasanya, saat menata tampilan sebuah halaman web, Anda akan menulis kode CSS sendiri untuk mengatur gaya atau desain elemen.

Berikut ini adalah contoh penggunaan CSS kustom untuk menciptakan desain tertentu, yang menunjukkan bagaimana gaya diterapkan menggunakan kode CSS secara manual.

Pada contoh di atas, kami membuat ulang desain yang sama menggunakan kelas utilitas CSS Tailwind :

  • Bagian badan menggunakan flex, justify-center, dan items-center untuk memusatkan konten secara horizontal dan vertikal di dalam viewport (h-screen).
  • Kontainer memiliki lebar penuh (w-full), dengan lebar maksimum max-w-3xl, dan padding (px-4 dan py-6).
  • Kontainer memiliki latar belakang putih (bg-white), sudut membulat (rounded-lg), dan bayangan sedang (shadow-md).
  • Perataan dan warna teks ditangani dengan text-center untuk pemusatan, text-gray-800 untuk teks utama, dan text-gray-600 untuk item daftar.
  • Ukuran font diatur menggunakan text-xl untuk paragraf dan text-sm untuk label langkah, dengan teks yang lebih besar (text-2xl) di dalam indikator langkah.
  • Daftar menggunakan list-disc untuk poin cakram dan list-inside untuk padding. Indikator langkah memiliki dimensi yang konsisten (w-12 dan h-12), berbentuk bulat (rounded-full), dan dipusatkan menggunakan flex, items-center, dan justify-center.
  • Warna diterapkan dengan bg-green-500, bg-yellow-500, dan bg-gray-200, sedangkan garis progres dan garis akhir menggunakan bg-gray-300.
  • Penempatan relatif dan absolut mengatur tata letak garis progres, dengan inset-0 untuk menjangkau lebar penuh. Garis akhir diposisikan dengan right-0 dan top-1/2.
  • Margin disesuaikan dengan mb-2 dan mb-3 untuk memberikan jarak antar elemen.

Menggunakan Tailwind CSS membantu Anda membuat desain khusus dengan cepat tanpa perlu menulis banyak CSS tambahan. Alih-alih membuat gaya baru dari awal, Anda menggunakan kelas utilitas yang telah ditentukan sebelumnya langsung di HTML Anda, yang dapat mempercepat pengembangan dan menghasilkan kode yang lebih bersih.

Mengapa Menggunakan Tailwind CSS?

Pada awalnya, metode ini mungkin terlihat agak membingungkan, dan Anda mungkin bertanya-tanya mengapa pendekatan ini lebih disarankan dibandingkan menulis CSS kustom sendiri. Jika Anda belum terbiasa, tampilannya bisa tampak rumit. Namun, setelah mulai menggunakan Tailwind CSS, Anda akan menemukan banyak kelebihannya.

Pengembangan Lebih Cepat: Tailwind CSS mempercepat alur kerja Anda karena memungkinkan penataan langsung di dalam file HTML. Anda tidak perlu bolak-balik antara file HTML dan CSS, sehingga pekerjaan menjadi lebih efisien.

  • Konsistensi Desain: Kelas-kelas utilitas membantu menjaga konsistensi desain. Karena Anda menggunakan kumpulan kelas yang sama di seluruh proyek, tampilan keseluruhan menjadi lebih seragam dan mudah dikontrol.
  • Pembaruan yang Sederhana: Jika Anda ingin mengubah tampilan desain, Anda dapat melakukannya langsung dari HTML. Hal ini membuat proses pembaruan lebih cepat, lebih mudah, dan mengurangi potensi kesalahan.
  • Ukuran File CSS Lebih Kecil: Dengan menggunakan kelas bawaan dari Tailwind, Anda tidak perlu menulis banyak CSS kustom. Akibatnya, ukuran file CSS menjadi lebih kecil, yang dapat membantu meningkatkan kecepatan pemuatan halaman.
  • Desain Responsif Secara Bawaan: Tailwind sudah dilengkapi dengan kelas untuk membuat desain responsif. Artinya, Anda dapat dengan mudah membuat tampilan yang terlihat baik di berbagai ukuran layar tanpa perlu menulis kode tambahan.
  • Mudah Dikustomisasi: Tailwind sangat fleksibel dan dapat disesuaikan. Anda bisa dengan mudah mengubah konfigurasi agar sesuai dengan kebutuhan desain dan preferensi proyek Anda.
  • Cepat Dipelajari: Meskipun butuh waktu untuk beradaptasi di awal, banyak pengembang merasa bahwa pendekatan “utility-first” lebih mudah dipelajari dan digunakan dibandingkan menulis aturan CSS dari nol.

Singkatnya, meskipun Tailwind CSS mungkin terlihat sedikit sulit dipahami pada awalnya, keuntungan yang ditawarkannya dapat mempercepat dan menyederhanakan proses pengkodean Anda. Sangat dianjurkan untuk mencoba Tailwind CSS guna meningkatkan efisiensi alur kerja Anda.

Mengapa Menggunakan Tailwind CSS?

Pada awalnya, metode ini mungkin terkesan membingungkan, dan Anda mungkin penasaran mengapa pendekatan ini lebih disukai dibandingkan dengan menulis CSS kustom sendiri. Pendekatan ini bisa terlihat kompleks jika Anda belum terbiasa. Namun, begitu Anda mulai menerapkan Tailwind CSS, Anda akan menemukan sejumlah keuntungan yang ditawarkannya.

Contoh :

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script> 
</head>

<body class="flex flex-col justify-center items-center 
    h-screen bg-gray-100">
    <div class="max-w-sm w-full py-6 bg-white shadow-lg 
        rounded-lg text-center">
        <h2 class="text-xl font-semibold mb-4">
            Interactive Button Example
        </h2>
        <button class="bg-blue-500 text-white py-2 px-4 
                rounded-lg outline-none hover:ring-2 
                ring-indigo-900 hover:bg-blue-800">
            Hover & Focus Me
        </button>
        <div class="text-sm">
            <p class="hover:text-blue-800 mt-2">
                Hover: Darker Blue
            </p>
            <p class="mt-1 text-blue-300">
                Focus: Light Blue Ring
            </p>
        </div>
    </div>
</body>

</html>

Pada contoh di atas, tombol berubah warna dengan hover:bg-blue-800 saat diarahkan. Kelas outline-none menghapus garis luar default, dan ring-2 ring-indigo-900 menambahkan cincin biru saat tombol difokuskan.


Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.

Terima Kasih 😀😊😘👌👍 :)

Tags

You may like these posts

Post a Comment

Previous Post Next Post