Tailwindcss template: tutorial layout dua kolom

Berikut ini cara mudah membuat Tailwindcss template. Bentuk desainnya layout dua kolom perbandingan 7:3 untuk theme blog post. Kolom sebelah kiri untuk muatan artikel sebesar 2/3 ukuran layar atau 66.6%, dan sisi kanan untuk sidebar sebesar 1/3 ukuran layar atau 33.3%.

Karena Tailwindcss hadir dalam bentuk class utility, tidak menyediakan paket komponen siap pakai seperti komponen-komponen Bootstrap.

Maka saat membuat HTML template dengan Tailwind CSS harus memilih sendiri class-class utility yang ada.

Ada juga sih kumpulan komponen web siap pakai hasil kreasi tim Tailwindui, hanya saja komponen- komponen tersebut tidak tersedia secara gratis alias paket premium.

Jadi, best practice layout dua kolom menggunakan framework CSS Tailwindcss, kita ambil konsep grid layout dari Bootstrap.

Bootstrap two columns with two nested columns.

Tampilan dua kolom dengan dua kolom bersarang di bawah kolom col-md-8.

Berikut susunan markup dasar untuk layout dua kolom ala Bootstrap komponen.

<body class="container">
	<main class="row">

	  <article class="md-col-8">

	    Content Article

				<section class="row">

					<div class="col-md-6">
						Related Conten 1
					</div>

					<div class="col-md-6">
						Related Conten 2
					</div>

				</section>
	  </article>

	  <aside class="md-col-4">

	    Sidebar

	  </aside>

	</main>
</body>

Kalau di ektrak class pada source kode HTML diatas, CSS value nya seperti ini:

  <style type="text/css">
		.container { 
			width: 100%; margin-right: auto; margin-left: auto; 
		}
		.row {
		  --bs-gutter-x: 1.5rem;
		  --bs-gutter-y: 0;
		  display: flex;
		  flex-wrap: wrap;
		  margin-top: calc(-1 * var(--bs-gutter-y));
		  margin-right: calc(-0.5 * var(--bs-gutter-x));
		  margin-left: calc(-0.5 * var(--bs-gutter-x));
		}
		.row > * {
		  box-sizing: border-box;
		  flex-shrink: 0;
		  width: 100%;
		  max-width: 100%;
		  padding-right: calc(var(--bs-gutter-x) * 0.5);
		  padding-left: calc(var(--bs-gutter-x) * 0.5);
		  margin-top: var(--bs-gutter-y);
		}
		.col-md-8 { 
			flex: 0 0 auto; width: 66.66666667%; 
		}
		.col-md-4 { 
			flex: 0 0 auto; width: 33.33333333%;
		}
		.col-md-6 { 
			flex: 0 0 auto; width: 50%;
		}
  </style>

Hasil render browser di layar smartphone:

Contoh layout dua kolom bootstrap di layar mobile.

Selanjutnya, mari kita implementasikan contoh layout dua kolom model Bootstrap ke versi Tailwind css.

1. Tailwindcss Template : 2-column responsive layout with flexbox

Ingat selalu, Tailwind css merender markup HTML mode layar smartphone terlebih dahulu (mobile-first), baru responsive desain mengikuti pembesaran layar mulai ukuran tablet ke layar desktop hingga monitor ultra wide.

Jadi, biasakan dulu mengetik class-class utility Tailwind css default, selanjutnya tinggal insert code utility untuk tampilan small (sm), medium (md), large (lg), extra large (xl) dan 2x extra large (2xl).

Petunjuk teknis penulisan utility Tailwindcss.

Caranya, siapkan dulu markup dasar:

<main>
	<div>
	  <article>
	    Content
			<section>
				<div>
					Related Conten 1
				</div>
				<div>
					Related Conten 2
				</div>
			</section>
	  </article>
	  <aside>
	    Sidebar
	  </aside>
 	</div>
</main>

Sementara abaikan dulu kolom bersarang yang ada di dalam kolom <article>.

Lalu, insert class utility Tailwind css nya:

<main class="max-w-7xl mx-auto mt-8"> <!-- Container-->

      <div class="box-border flex flex-wrap"> <!-- Row -->
    
        <article class="w-full bg-orange-100 p-4"> <!-- Content -->
          
          <p class="border border-slate-500">Content 2/3</p>
  
        </article> <!-- ./Conten -->
    
        <aside class="w-full bg-green-200 p-4"> <!-- Aside -->

          <p class="border border-slate-600">Sidebar 1/3</p>

        </aside> <!-- ./Aside -->
      
      </div> <!-- ./Row -->
    
    </main> <!-- ./Container-->

Hasil render di layar desktop:

Hasil render dilayar smartphone:

Berikutnya, insert code responsive design dua kolom mulai di ukuran medium; md:w-2/3 dan md:w-1/3 :

<main class="max-w-7xl mx-auto mt-8"> <!-- Container-->

      <div class="box-border flex flex-wrap"> <!-- Row -->
    
        <article class="w-full md:w-2/3 bg-orange-100 p-4"> <!-- Content -->
          
          <p class="border border-slate-500">Content 2/3</p>
  
        </article> <!-- ./Conten -->
    
        <aside class="w-full md:w-1/3 bg-green-200 p-4"> <!-- Aside -->

          <p class="border border-slate-600">Sidebar 1/3</p>

        </aside> <!-- ./Aside -->
      
      </div> <!-- ./Row -->
    
    </main> <!-- ./Container-->

Hasil render di layar lebar berubah menjadi dua kolom dengan perbandingan 7:3.

Untuk hasil render di layar mobile, masih sama seperti gambar: ‘preview 2 mobile’.

Berikutnya, tambah kolom lagi di dalam kolom <article> biasanya disebut dengan nested column.

<main class="max-w-7xl mx-auto mt-8 h-screen"> <!-- Container-->

      <div class="box-border flex flex-wrap"> <!-- Row -->
    
        <article class="w-full md:w-2/3 bg-orange-100 p-4"> <!-- Content -->
          
          <p class="border border-slate-500">Content 2/3</p>
  
          <section class="box-border flex flex-wrap">
              <div class="w-full md:w-1/2 border border-indigo-500">
                  Related content 1/2
              </div>
              <div class="w-full md:w-1/2 border border-pink-700">
                  Related content 1/2
              </div>
          </section>
  
        </article> <!-- ./Conten -->
    
        <aside class="w-full md:w-1/3 bg-green-200 p-4"> <!-- Aside -->
          <p class="border border-slate-600">Sidebar 1/3</p>
        </aside> <!-- ./Aside -->
      
      </div> <!-- ./Row -->
    
    </main> <!-- ./Container-->

Hasil render :

Markup Final

Hasil akhir layout 2 kolom CSS Tailwind menggunakan flexbox, code markup dapat disederhanakan menjadi:

<main class="max-w-7xl mx-auto mt-8 flex flex-wrap"> <!-- Container/Row-->
  
	<article class="w-full md:w-2/3 bg-orange-100 p-4"> <!-- Content -->
	
		<p class="border border-slate-500">Content 2/3</p>
		
		<section class="flex flex-wrap">
			<div class="w-full md:w-1/2 border border-indigo-500">
				Related content 1/2
			</div>
			<div class="w-full md:w-1/2 border border-pink-700">
				Related content 1/2
			</div>
		</section>
	
	</article> <!-- ./Conten -->
	
	<aside class="w-full md:w-1/3 bg-green-200 p-4"> <!-- Aside -->
	
		<p class="border border-slate-600">Sidebar 1/3</p>
	
	</aside> <!-- ./Aside -->
  
</main> <!-- ./Container/row-->

Baris code untuk membungkus div row dapat disatukan dalam div pembungkus container.

Lumayan dapat menghemat satu blok code.

2. Tailwindcss Template : 2-column responsive layout with grid

Selain menggunakan flexbox, kita juga bisa layout kolom menggunakan property CSS grid. Untungnya, sejak Tailwindcss versi 1.x, sudah menghadirkan CSS properti terbaru, yaitu grid:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Sedangkan Bootstrap, hingga versi ke 5.x belum menghadirkan grid murni dari property CSS.

Pada latihan Tailwindcss example layout ini, kita coba pakai dua versi property CSS grid:

Grid Columns
Grid Auto Flow

Layout with grid column

Layout dengan properti css grid-template-columns: auto;.

Untuk nama class Tailwindcss grid-cols-3, dokumentasi lengkap baca disini.

<main class="max-w-7xl mx-auto grid md:grid-cols-3 gap-4 mt-8"> <!-- Container -->

	<article class="md:col-span-2 bg-orange-100 p-4"> <!-- Content -->
	
		<p class="border border-slate-500">Content 2/3</p>
	
		<section class="grid md:grid-cols-2 gap-4 mt-4">
		
			<div class="border border-indigo-500">
			Related content 1/2
			</div>
			
			<div class="border border-pink-700">
			Related content 1/2
			</div>
		
		</section>
	
	</article> <!-- ./Conten -->
	
	<aside class="bg-green-200 p-4"> <!-- Aside -->
	
		<p class="border border-slate-600">Sidebar 1/3</p>
	
	</aside> <!-- ./Aside -->

</main> <!-- ./Container-->

Hasil render browser:

Layout with grid auto flow

Berikutnya, untuk membelah dua kolom, menggunakan property css grid-auto-flow: column;.

Untuk nama class Tailwindcss grid-flow-col, dokumentasi lengkap baca disini.

<main class="max-w-7xl mx-auto grid md:grid-flow-col gap-4"> <!-- Container -->

  <article class="md:grid-col-span-2 bg-orange-100 p-4"> <!-- Content -->
    
    <p class="border border-slate-500">Content 2/3</p>

    <section class="grid md:grid-cols-2 gap-4 mt-4">
        
        <div class="border border-indigo-500">
            Related content 1/2
        </div>

        <div class="border border-pink-700">
            Related content 1/2
        </div>

    </section>

  </article> <!-- ./Conten -->

  <aside class="md:grid-col-span-1 bg-green-200 p-4"> <!-- Aside -->

    <p class="border border-slate-600">Sidebar 1/3</p>
    
  </aside> <!-- ./Aside -->

</main> <!-- ./Container-->

Hasil render browser.

Lihat Demo / Download Tailwind Template ini.

Kesimpulan:

Sementara, dapat disimpulkan bahwa untuk membuat template HTML dengan Tailwindcss theme dua kolom responsive design ada tiga model, menghasilkan desain yang sama. Dari ketiga model tersebut mana yang lebih bagus?

Jawabannya tergantung kebutuhan dan kemudahan dalam implementasi dalam project sebenarnya.

Kalau menggunakan utility flexbox itu lebih bagus, mengingat CSS flex property sudah lebih mature ketimbang css grid property.
Kalau menginginkan markup HTML yang lebih ringkas dan bersih, utility grid pilihan yang lebih cerdas.
Yang lebih ideal, menggabungkan keduanya, utility grid untuk kontainer terluar dan serahkan urusan dalam pada utility flex.
Terakhir, kalau ada saran terbaik dari pembaca artikel ini yang sudah lebih dulu menggunakan Tailwindcss, mohon tidak segan-segan menanggapi tulisan ini melalui kolom komentar.

Terima kasih. Mohon maaf atas kekurangan, kekeliruan pada penulisan artikel tutorial ini.