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.
Pada artikel lanjutanya kali ini sebelum kita masuk kedalam coding untuk membangun suatu halaman ada baiknya sebgai developer kita juga tahu konsep apa yang di usung oleh si Tailwind CSS ini , Nah di sini saya akan memberikan penjabaran beberapa core concepts yang di gunakan Tailwind CSS.
Utility-First
Jika kita menggunakan CSS tradisional setiap pembangunan antar muka pada suatu halaman website atau aplikasi kita memerlukan CSS. Untuk membedakan antara CSS tradiisional dengan tailwind mari kita buat antar muka sederahana menggunakan CSS tradisional :
<div class="chat-notification">
<div class="chat-notification-logo-wrapper">
<img class="chat-notification-logo" src="https://tailwindcss.com/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="chat-notification-content">
<h4 class="chat-notification-title">ChitChat</h4>
<p class="chat-notification-message">You have a new message!</p>
</div>
</div>
.chat-notification {
display: flex;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
padding-top: 0.25rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
Maka akan menghasilkan tampilan seperti ini :
Tetapi jika kita menggunakan Tailwind CSS silahkan silah perbedaan code 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="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
<div class="flex-shrink-0">
<img class="h-12 w-12" src="https://tailwindcss.com/img/logo.svg" alt="ChitChat Logo">
</div>
<div class="ml-6 pt-1">
<h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
<p class="text-base text-gray-600 leading-normal">You have a new message!</p>
</div>
</div>
</body>
</html>
Yups cukup hanya mendefenisikan Class-class kecil untuk merepresentasikan CSS tradisional sehingga kita tidak membutuhkan CSS tradisional lagi untuk membuat UI.
Dari contoh di atas kita menggunakan :
- Tailwind’s flexbox and padding utilities (
flex,flex-shrink-0, andp-6) to control the overall card layout - The max-width and margin utilities (
max-w-smandmx-auto) to constrain the card width and center it horizontally - The background color, border radius, and box-shadow utilities (
bg-white,rounded-lg, andshadow-xl) to style the card’s appearance - The width and height utilities (
w-12andh-12) to size the logo image - The margin and padding utilities (
ml-6andpt-1) to position the card text - The font size, text color, and line-height utilities (
text-xl,text-gray-900,leading-tight, etc.) to style the card text
Baiklah teman-teman kita cukupkan dahulu untuk Memahami Core Concepts Utility-First Pada Tailwind CSS, Untuk selanjutnya kita akan membahas lebih detail dan dalam lagi di artikel selanjutnya.
The post Memahami Core Concepts Utility-First Pada Tailwind CSS appeared first on Kursus Website Terbaik.