Pendekatan Utility-First Tailwind CSS
Terapkan class utilitas siap pakai langsung dalam HTML, sesuaikan tema di tailwind.config.js, dan gunakan @apply untuk mengekstrak pola yang berulang.
Pendekatan Utility-First Tailwind CSS adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu CSS Berbasis Utilitas
Tailwind CSS menyediakan kelas utilitas siap pakai untuk setiap properti CSS. Alih-alih menulis CSS khusus, Anda menyusun gaya dengan menambahkan kelas utilitas langsung ke HTML. Satu kelas = satu deklarasi CSS.
Memasang Tailwind
Pasang Tailwind dan inisialisasi konfigurasinya. Proyek Vite menggunakan plugin Tailwind Vite atau plugin PostCSS.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
# Or with Vite plugin:
npm install -D @tailwindcss/viteKelas Utilitas dalam Praktik
Bangun kartu hanya menggunakan kelas utilitas Tailwind. Tidak diperlukan berkas CSS khusus.
<div class="bg-white rounded-lg shadow-md p-6 max-w-sm">
<img class="w-full h-48 object-cover rounded-md mb-4" src="..." alt="...">
<h2 class="text-xl font-semibold text-gray-800">Card Title</h2>
<p class="text-gray-500 mt-2">Card description goes here.</p>
<button class="mt-4 w-full bg-indigo-600 text-white py-2 rounded hover:bg-indigo-700 transition-colors">
Read More
</button>
</div>Awalan Responsif
Tambahkan awalan titik henti responsif. md: diterapkan pada layar berukuran sedang dan lebih besar. lg: diterapkan pada layar besar. Tailwind mengutamakan perangkat seluler.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">Varian Keadaan
Tambahkan awalan pada kelas dengan varian keadaan: hover:, focus:, active:, disabled:, dark:.
<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-400 disabled:opacity-50 disabled:cursor-not-allowed">Mengonfigurasi Tema
Sesuaikan warna, jarak, jenis huruf, dan titik henti dalam tailwind.config.js. Perluas tema bawaan atau ganti sebagian isinya.
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
brand: { 500: '#6366f1', 600: '#4f46e5' }
},
fontFamily: {
sans: ['Inter', ...defaultTheme.fontFamily.sans]
}
}
}
}@apply — Mengekstrak Pola
Gunakan @apply dalam berkas CSS untuk menyusun kelas utilitas menjadi aturan CSS yang dapat digunakan kembali. Gunakan secukupnya — untuk sebagian besar kasus, kelas utilitas langsung lebih disukai.
/* Only for highly repeated patterns */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-indigo-600 text-white rounded-md
hover:bg-indigo-700 transition-colors font-medium;
}
}Menghapus CSS yang Tidak Digunakan
Tailwind menghasilkan ribuan kelas utilitas. Dalam produksi, Tailwind memindai berkas sumber Anda dan menghapus setiap kelas yang tidak digunakan, sehingga menghasilkan berkas CSS yang sangat kecil (sering kali di bawah 10KB).
Tailwind dengan React/Vue
Dalam React, gunakan cn() (clsx + twMerge) untuk menerapkan kelas Tailwind secara bersyarat tanpa konflik. Dalam Vue, gunakan pengikatan :class.
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
function cn(...classes: string[]) { return twMerge(clsx(classes)); }
<div className={cn('rounded-lg p-4', featured && 'border-2 border-indigo-600')}>IntelliSense Tailwind
Pasang ekstensi Tailwind CSS IntelliSense untuk VSCode agar mendapatkan pelengkapan otomatis, pratinjau nama kelas saat diarahkan, dan linting kelas yang tidak dikenal. Ekstensi ini sangat meningkatkan pengalaman pengembangan Tailwind.
Kritik dan Pembelaan terhadap Tailwind
Kritik: HTML menjadi penuh sesak dengan banyak kelas sehingga lebih sulit dibaca. Pembelaan: Anda tidak pernah menulis CSS, semua gaya ditempatkan bersama, dan sistem desain ditegakkan melalui konfigurasi. Sebagian besar tim yang mencoba Tailwind secara konsisten melaporkan produktivitas yang lebih tinggi.
Pemeriksaan Singkat
Bagaimana Tailwind menangani ukuran bundel produksi jika menghasilkan ribuan kelas utilitas?
Ringkasan: Tailwind CSS
Berbasis utilitas: satu kelas = satu properti CSS. Untuk sebagian besar kasus, CSS khusus tidak diperlukan. Awalan responsif dan keadaan (md:, hover:). Sesuaikan melalui tailwind.config.js. Gunakan @apply untuk pola yang berulang. Build produksi memindai dan menghapus kelas yang tidak digunakan. Gunakan cn() + twMerge untuk kelas bersyarat dalam React. Pasang ekstensi IntelliSense.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pendekatan Utility-First Tailwind CSS” gratis?
Ya — teks lengkap “Pendekatan Utility-First Tailwind CSS” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Pendekatan Utility-First Tailwind CSS”?
Terapkan class utilitas siap pakai langsung dalam HTML, sesuaikan tema di tailwind.config.js, dan gunakan @apply untuk mengekstrak pola yang berulang. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Pendekatan Utility-First Tailwind CSS” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Metodologi BEM: Block, Element, Modifier
- Modul CSS: Nama Class Berscope
- CSS-in-JS: Styled-components dan Emotion
- Pendekatan Utility-First Tailwind CSS