Setelah pada artikel sebelumnya kita telah sedikit berkenalan dengan apa itu Tailwind CSS dimana Tailwind css merupakan sebuah framework untuk CSS untuk keperluan membangun antar muka seuatu halaman website atau aplikasi.

Sekarang kita akan membahas satu core concepts yang di gunakan oleh Tailwind CSS setelah kita memebhas konsep Utitily-first di artikel sebelumnya.

Responsive Design

Jika kita mendengar kata responsive design pasti yang di kepala teman-teman tertuju ke satu framework sejuta umat untuk membangun antar muka yang responsive atau mobile apps friendly, Yups TWITTER BOOTSTRAP FRAMEWORK. Tidak heran jika teman-teman berfikiran kesana karena bootstrap meruakan framework yang sangat populer di masanya bahkan sampai saat ini .

Pada tailwind CSS mereka Menggunakan varian utilitas responsif untuk membangun antarmuka pengguna yang adaptif. Maksudnay seperti apa ?

Setiap kelas utilitas di Tailwind dapat diterapkan secara kondisional pada breakpoints yang berbeda, yang menjadikannya sepotong kue untuk membangun antarmuka responsif yang kompleks tanpa harus meninggalkan HTML Anda.

Ada empat breakpoint secara default, terinspirasi oleh resolusi perangkat umum:

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

Jadi di tailwind CSS untuk membangun antar muka yang responsive di bagi menjadi 4 break point yaitu

1. Small (sm)
2. Medium (md)
3. Large (lg)
4. Extra Large (xl)

Break point di atas juga di gunakan oleh bootstrap untuk membangun antar muka yang responsive, Tetapi berbeda pendekatan dengan tailwind CSS. Oke langusng saja kita contohkan untuk membangun satu antar muka sederhana menggunkan tailwind CSS untuk melihat Responsive Design yang di usung nya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div class="md:flex">
        <div class="md:flex-shrink-0">
          <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80" alt="Woman paying for a purchase">
        </div>
        <div class="mt-4 md:mt-0 md:ml-6">
          <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
          <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
          <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
        </div>
      </div> 
</body>
</html>

Jika di tampilkan pada browser lalu menggunakan Device Toolbar untuk melihat responsivitasnya maka hasilnya akan seperti ini :

kita menggunakan Class-class kecil untuk membangun suatu layout yang sederahanya sampai yang kompleks di Tailwind CSS.

Baiklah teman-teman kita cukupkan dahulu untuk Memahami Core Concepts Responsive Design Pada Tailwind CSS, Untuk selanjutnya kita akan membahas lebih detail dan dalam lagi di artikel selanjutnya.

Memahami Core Concepts Responsive Design Pada Tailwind CSS

Responsive Design

Kategori