Mengenal Tailwind CSS
Panduan memulai menggunakan CSS framework Tailwind CSS.
Tulisan ini akan membahas apa itu Tailwind CSS, bagaimana menggunakannya dan konsep dasar dari Tailwind CSS.
Apa itu Tailwind CSS?
Tailwind CSS adalah ‘utility-first’ CSS framework yang digunakan untuk membuat User Interface(UI) atau desain dengan cepat.
Selanjutnya kita akan gunakan istilah tailwindcss untuk meringkas penyebutan Tailwind CSS.
Yang dimaksud dengan ‘utility-first’ adalah tailwindcss menyediakan banyak utility class yang dapat digunakan untuk membuat custom desain tanpa harus menulis CSS.
Contoh:
Membuat button menggunakan CSS:
index.html
<link rel="stylesheet" type="text/css" href="styles.css"><body>
<button class='button'>Klik Disini</button>
</body>
styles.css
.button {
background: #7C3AED;
color: #ffffff;
padding: 0.25rem 1rem;
border-width: 1px;
border-radius: 0.25rem;
}.button:hover {
background: #5B21B6;
}
Membuat button menggunakan tailwindcss:
index.html
<body>
<button class="bg-purple-500 text-white
py-1 px-4
border rounded hover:bg-purple-800">Klik Disini</button>
</body>Dengan tailwindcss, kita tidak perlu menulis CSS untuk menentukan style dari button, cukup menggunakan utility class seperti bg-purple-500, text-white dll.
Install Tailwind CSS
Ada 3 cara untuk install tailwindcss ke sebuah project.
- Install sebagai PostCSS plugin
- Install tanpa PostCSS
- Content Delivery Network (CDN)
Dari ketiga cara diatas cara pertama adalah yang paling direkomendasikan, sedangkan cara terakhir yaitu menggunakan CDN adalah yang paling tidak direkomendasikan karena memiliki banyak keterbatasan.
Bagi yang belum tahu PostCSS, PostCSS adalah sebuah tool untuk memanipulasi CSS dengan menggunakan plugin JavaScript.
Tailwind sering digunakan pada framework seperti Vue, Next.js, React dll
Pada bagian ini kita akan bahas bagaimana menginstall Tailwind pada aplikasi React (CRA).
Install Tailwind CSS pada React menggunakan CRA
Jalankan perintah berikut pada terminal untuk membuat sebuah Create React App project:
npx create-react-app my-app
cd my-appInstall tailwindcss:
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9Selain package tailwindcss kita juga menginstal beberapa package lain seperti @tailwindcss/postcss7-compat @tailwindcss/postcss7-compat , hal ini dikarenakan CRA tidak support PostCSS dan kita harus menginstall package tambahan agar tailwindcss bisa diinstall sebagai PostCSS plugin.
Kemudian install package craco agar kita bisa mengubah konfigurasi dari PostCSS.
npm install @craco/cracoUpdate file package.json pada bagian scripts, ganti react-scripts:
{
// ...
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
"eject": "react-scripts eject"
},
}Kemudian buat file konfigurasi craco dengan nama craco.config.js di root folder, tambahkan tailwindcss dan autoprefixer sebagai plugin PostCSS.
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}Buat sebuah file konfigurasi untuk tailwindcss dengan nama tailwind.config.js di root folder, dan salin konfigurasi berikut:
module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}Langkah berikutnya adalah menambahkan tailwindcss ke file CSS.
Buka file src/index.css, ganti isi dari file tersebut
Dari:
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
Menjadi:
@tailwind base;
@tailwind components;
@tailwind utilities;Kemudian jalankan perintah npm start untuk menjalankan aplikasi.
Konsep Dasar
Kita akan bahas beberapa konsep dasar pada tailwindcss. Tidak semuanya, tapi dengan memahami konsep ini kamu sudah bisa mulai menggunakan tailwindcss.
Utility First
Seperti yang sudah disebutkan sebelumnya, bahwa tailwindcss menggunakan utility class atau helper class seperti bg-purple-500 untuk membuat custom desain menggantikan CSS.
Kita lihat code sebelumnya:
<button class="bg-purple-500 text-white
py-1 px-4
border rounded hover:bg-purple-800">Klik Disini</button>Utility class yang ada pada code diatas:
bg-purple-500, mewakili atau mempresentasikan CSS propertiesbackground: #7C3AED;text-white, mempresentasikan propertiescolor: #ffffff;py-1 px-4, mempresentasikan propertiespadding:0.25rem 1rem;border, mempresentasikan propertiesborder-width:1px;rounded, mempresentasikan propertiesborder-radius: 0.25rem;
Bagi yang sudah terbiasa dengan CSS, menggunakan utility class membutuhkan penyesuaian.
Misalnya untuk mengatur besarnya font pada CSS kita bisa gunakan properties font-size dan ukuran font ditentukan dengan angka dalam satuan px, em atau rem.
font-size: ukuran dalam px/em/rem;Pada tailwindcss, kita harus memilih utility class yang sesuai.
Untuk masalah warna, tailwindcss sudah menyediakan palet siap pakai.
Jika ingin menggunakan warna selain yang sudah disediakan atau warna custom, kita bisa tambahkan pada file tailwind.config.js.
module.exports = {
theme: {
colors: {
blue: {
light: '#85d7ff',
DEFAULT: '#1fb6ff',
dark: '#009eeb',
},
}
}
}Kemudian untuk menggunakannya kita bisa tulis seperti bg-blue-light.
Dengan cara ini ditambah dengan penulisan utility class yang bersifat inline, mengatur tampilan atau desain dari suatu elemen HTML dapat dilakukan dengan cepat.
Responsive Design
Membuat desain yang responsif menggunakan tailwindcss sangat mudah, tailwindcss menyediakan lima breakpoints yang dapat kita gunakan bersamaan dengan utility class.
Contoh penggunaan:
<div class="text-base md:text-lg"></div>Ukuran font pada element div tersebut adalah 1rem dan akan berubah menjadi 1.125rem pada resolusi layar berukuran atau lebih besar dari 768px .
Nilai atau value dari breakpoint diatas bisa kita ubah di file tailwind.config.js.
module.exports = {
theme: {
screens: {
'tablet': '640px',
'laptop': '1024px',
'desktop': '1280px',
},
}
}Pseudo Class
Pseudo-class digunakan untuk mengatur tampilan dari suatu element HTML pada kondisi(state) tertentu.
Contohnya, kita bisa mengubah warna dari suatu link pada kondisi hover (mouse diatas link) menggunakan CSS properties
a:hover {
color: #FF00FF;
}Pada tailwindcss, pseudo-class dilakukan dengan menambahkan state sebelum utility class.
<button class="bg-purple-500 text-white
py-1 px-4
border rounded hover:bg-purple-800">Klik Disini</button>Warna background dari button akan berubah dari #8B5CF6 (bg-purple-500) menjadi #5B21B6 (bg-purple-800) saat hover.
Base Styles
Base atau global style adalah style yang diterapkan untuk semua element HTML.
Ketika tailwindcss ditambahkan ke suatu project, secara default tailwindcss akan menerapkan base style yang disebut preflight.
Contoh aturan atau style yang ada di dalam preflight adalah semua element heading dibuat tidak memiliki styled (unstyled) dan memiliki ukuran yang sama dengan ukuran teks biasa.
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}Bagaimana jika kita ingin mengubah base style ini?
Caranya kita bisa tambahkan custom style pada file CSS.
Pada sebuah CRA project, kita bisa override base style dengan menambah custom style pada file index.css.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
}Ukuran font semua element h1 akan menjadi 1.5rem, dan element h2 akan menjadi 1.25rem.
Daftar lengkap dari utility class dapat ditemukan di halaman dokumentasi official tailwind.
Semoga tulisan singkat ini bermanfaat bagi kamu yang ingin menggunakan Tailwind CSS pada next project kamu atau kamu berpikir ingin mengganti CSS frameworkmu.
Terima Kasih dan jangan lupa clap 👏
