Styling Best Practices untuk Tailwind CSS

Written on May 15, 2021 by

photo of me

Theodorus Clarence.

––– views • 6 min read

Read in English

Introduction

Blog ini tidak menjelaskan basic" dari Tailwind CSS. Tailwind Labs memiliki tutorial lengkap di youtube channel. Sangat recommended untuk dicek.

Menurut saya, Tailwind CSS adalah cara lain untuk menulis CSS, dan tidak akan mengubah knowledge dasar dari CSS dan responsive design.

Kenapa Tailwind CSS?

Tailwind CSS adalah utility-first framework yang menjadi go-to framework saya untuk project" saya. Tailwind CSS menyediakan class yang reusable sehingga saya bisa menggunakan komponen yang bahkan cocok di lintas website. Cek Library, saya punya beberapa component yang saya simpan supaya mudah diakses ketika saya membutuhkannya.

Tailwind CSS menyediakan banyak CSS best practices yang saya juga sering ikuti ketika menulis Vanilla CSS atau SCSS. Kebanyakan menghilangkan logic" css yang bisa dibilang aneh oleh banyak developer, seperti box-sizing, button defaults yang annoying, collapsing margins, dll. Hal ini menyebabkan banyak developer berpikir bahwa Tailwind CSS adalah sebuah cara untuk menghindari menulis CSS dan menghindari untuk mengerti logic CSS yang 'quirky'.

Tetapi, saya suka menulis CSS. Saya cukup nyaman menulis dengan Vanilla CSS dan mengerti bagaimana cara CSS bekerja. Bagi saya, mempelajari Vanilla CSs sangat penting dan Tailwind CSS tidak cocok untuk menggantikan CSS ketika kamu belum mengerti CSS.

Jangan terlalu nyaman dengan framework sampai-sampai kamu tidak bisa membuat website tanpa menggunakan Tailwind CSS atau framework lainnya seperti bootstrap.

Well, enough talking, let's get to the best practices yang saya gunakan ketike menulis CSS dan Tailwind CSS. Keduanya applies karena seperti yang saya sudah bilang, Tailwind CSS hanya cara lain untuk menulis CSS.

1. Menggunakan Layout Class (or container)

Mungkin kamu tidak sadar website" yang tidak menggunakan constraining width jika kamu tidak menggunakan monitor yang besar. Kadang, developers lupa untuk menambahkan constraint ini ketika development dan menimbulkan styling issues untuk orang" yang memiliki layar yang lebih besar.

Kamu bisa juga menggunakan container class dari Tailwind CSS. Tapi saya lebih nyaman menggunakan ini:

.layout {
max-width: 68.75rem; // 1100px
width: 90%;
margin-left: auto;
margin-right: auto;
}
css

Width 90% akan memberikan padding ketika user membuka website dalam mobile view dan web akan di constrain ketika containernya sudah mencapai 1100px dan akan tetap stay di tengah. Kamu bisa gunakan value apapun untuk max-width, tetapi saya menemukan 1100px cocok untuk banyak kasus.

Untuk menggunakan class ini, biasanya saya mengkombinasi dengan section tag seperti ini:

<!-- Taruh semua of background colors di section tag -->
<section>
<!-- Sedangkan pada `div.layout`, kita bisa menambahkan flex, text-colors, min-height, dan container's font-size -->
<div class="layout">
<h1>Content</h1>
</div>
</section>
html

Kita bisa meletakkan background colors atau background image pada section tag, untuk menghindari terpotong karna constraint yang kita tetapkan.

Dibawah ini adalah demo untuk layout class, kamu juga bisa check codepennya

Layout Class

2. Tambahkan base style

Tailwincss memiliki feature yang bernama Preflight, dimana merupakan set of base styles untuk project yang didesign untuk menyamaratakan antar cross-browser dan membuat lebih mudah dengan menambahkan base style.

Simplenya, Preflight mengubah default stylesheet agent seperti meremove margin, padding, dan font-size. Juga memberikan base style dan reset untuk butttons, links, list, dll. Lihat lebih banyak di Preflight Docs.

Hal ini sangat baik karena kita jadi tidak perlu untuk meremove warna biru dan underline dari link, mereset font-family, background, border dari button, dan banyak hal yang cukup menyebabkan. Tetapi kita kehilangan beberapa hal seperti font-size, dan font-weight dari tiap heading.

Saya memiliki preconfigured base style yang biasanya saya tambahkan ke seluruh project" saya, style ini juga sudah ada di starter saya yang selalu saya gunakan.

@layer base {
h1 {
@apply text-3xl font-bold md:text-5xl font-primary;
}
h2 {
@apply text-2xl font-bold md:text-4xl font-primary;
}
h3 {
@apply text-xl font-bold md:text-3xl font-primary;
}
h4 {
@apply text-lg font-bold font-primary;
}
body {
@apply text-sm font-primary md:text-base;
}
}
css

Style ini akan menambahkan responsive font-size, dan menambahkan font-family yang kamu gunakan. Jangan lupa untuk mengconfigure font-primary di tailwind config, atau gunakan font-sans

3. Whitespace

Sama seperti sebelumnya, karena preflight, default margin dihilangkan dari base style. Maka kita harus menambahkan margin sendiri. Biasanya saya mb-2 dam mb-4 cukup.

Tailwind CSS juga memiliki built-in CSS pattern yaitu Lobotomized Owl milik Heydon Pickering. Pattern ini sangat membantu bahkan di Vanilla CSS. Di Tailwind CSS, pattern ini disebut Space Between. Pattern ini bekerja dengan menambahkan margin-top ke seluruh child elements kecuali yang pertama.

Here is the original one by Heydon:

.flow-content > * + * {
margin-top: 1.5em;
}
css

Lobotomized Owl biasanya menggunakan relative units sehingga besarnya relatif pada font size containernya. Untuk mengetahui relative units lebih lanjut, baca blog saya tentang rem, em, dan px unit

Tailwind CSS Space Between kurang lebih melakukan yang sama, tapi menggunakan rem. Maka kita hanya bisa menggunakan ketika kita sudah yakin semua child elementsnya memiliki spacing yang sama. Contoh:

<!-- Menggunakan normal margin class -->
<div>
<p class="mb-2">Paragraph</p>
<p class="mb-2">Paragraph</p>
<p class="mb-2">Paragraph</p>
<p class="mb-2">Paragraph</p>
</div>
<!-- Menggunakan Space Between -->
<div class="space-y-2">
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
<p>Paragraph</p>
</div>
html

4. Gunakan component dan map function

Saya biasanya menggunakan React, maka DRY code dapat lebih mudahdicapai dengan mapping value, dan menggunakan components. Contohnya adalah button component

export default function CustomLink(props) {
return (
<UnstyledLink
{...props}
className={`${props.className} inline-flex items-center font-bold hover:text-primary-400`}
>
{props.children}
</UnstyledLink>
);
}
jsx

Dengan menggunakan component, kita tidak akan mengulang class yang sama berkali"

Untuk mapping, biasanya saya meletakkan data di JavaScript file lain, atau mendeclare sebuah array, kemudian di map.

const links = [
{ href: '/', label: 'Home' },
{ href: '/projects', label: 'Projects' },
{ href: '/blog', label: 'Blog' },
{ href: '/library', label: 'Library' },
{ href: '/about', label: 'About' },
];
export default function Nav() {
return (
<nav className='bg-gray-700'>
<ul className='flex items-center justify-between px-8 py-4'>
<li>
<Link href='/'>
<a className='font-bold text-green-400'>Home</a>
</Link>
</li>
<ul className='flex items-center justify-between space-x-4'>
{links.map(({ href, label }) => (
<li key={`${href}${label}`}>
<Link href={href}>
<a className='text-white hover:text-green-400'>{label}</a>
</Link>
</li>
))}
</ul>
</ul>
</nav>
);
}
jsx

Notice penggunaan space between untuk mereduce class yang digunakan. Code ini saya ambil dari website ini, codenya dapat diakses di github. Kindly star kalo membantu!

Install Tailwind CSS Injector Addons

Ketika tailwindcss di ship ke production, class yang diship adalah class yang hanya kita gunakan saja di website tersebut (tree shaken). Kadang kita butuh untuk melakukan debug dengan menambah class langsung di dev tools, atau kita mau bermain" dengan website yang tidak menggunakan tailwindcss sama sekali.

Addons yang saya buat ini menyelesaikan problem tersebut dengan menginject tailwindcss CDN di website yang kita inject.

Install Tailwind CSS Injector

Enjoying my post? Kindly subscribe to my newsletter if you want an update everytime I post.