Mulai dari nol: Membangun halaman web responsif modern menggunakan Tailwind CSS.

Di bidang web yang saat ini mengejar pengembangan yang efisien, kerangka kerja CSS yang berfokus pada kepraktisan semakin menjadi pilihan utama. Di antaranya,Tailwind CSS Menonjol berkat konsep “atomisasi” yang unik, alat ini tidak menyediakan komponen siap pakai, melainkan menyajikan serangkaian kelas praktis yang bersifat detail dan dapat dikombinasikan secara bebas, sehingga pengembang dapat dengan cepat membangun desain apa pun langsung dalam HTML. Selamat tinggal pada era di mana kita harus memikirkan nama kelas dengan susah payah…Tailwind CSS Mendorong penggunaan kombinasi elemen-elemen untuk menciptakan gaya tampilan (style) sangat meningkatkan fleksibilitas dan konsistensi dalam pengembangan antarmuka pengguna (UI), serta merupakan alat yang sangat berguna dalam pengembangan situs web responsif modern.

Memahami keunggulan utama Tailwind CSS

Framework CSS tradisional seperti Bootstrap menyediakan berbagai fitur, seperti… .btn、.card Komponen siap pakai seperti ini, meskipun dapat digunakan langsung setelah dibuka kemasannya, sering kali memerlukan banyak penyesuaian gaya (style adjustments) saat digunakan dalam desain yang sangat disesuaikan (highly customized designs). Hal ini menyebabkan kode menjadi berlebihan (code bloat) dan timbulnya konflik antara berbagai elemen desain yang memiliki karakteristik khusus (specificity conflicts).Tailwind CSS Mengadopsi filosofi yang sangat berbeda: menyediakan kelas-kelas atomik yang memiliki hanya satu tanggung jawab (single responsibility).

Kelas atomisasi yang mengutamakan fungsionalitas praktis

Tailwind CSS Nama kelas tersebut langsung sesuai dengan satu atribut CSS tertentu. Misalnya,.mt-4 \nKorespondensi margin-top: 1rem;，.text-blue-500 Nilai warna biru yang sesuai dengan sistem heksadesimal. Desain ini memungkinkan Anda tidak perlu bolak-balik antara file HTML dan CSS, serta hampir tidak perlu menulis kode CSS khusus. Semua keputusan terkait tata letak (style) dibuat di tingkat template, sehingga proses desain prototipe dan iterasi berjalan sangat cepat.

推荐阅读 Dari Pemula hingga Ahli: Panduan Utama Tailwind CSS untuk Meningkatkan Efisiensi Pengembangan Front-End.。

Kemampuan untuk disesuaikan secara tinggi (highly customizable) dan konsistensi desain (design consistency).

Melalui direktori akar proyek tailwind.config.js Dengan berkas konfigurasi, Anda dapat mengontrol semuanya secara penuh. Tailwind Sistem desain ini memungkinkan Anda untuk mendefinisikan palet warna, ukuran font, proporsi spasi, titik pemutusan (breakpoints), dan lainnya. Hal ini memastikan bahwa seluruh proyek mengikuti seperangkat standar desain yang ketat, sehingga setiap pengembang dapat menggunakan “bahasa desain” yang sama dalam proses pembangunan, sehingga konsistensi tampilan antar komponen (UI) tetap terjaga dengan sangat baik selama kolaborasi tim.

Asisten Pembuatan Situs Web WordPress.com.

99,999% ketersediaan + ketahanan bencana lintas zona, dukungan 24 jam sehari, paket blog gratis untuk membangun situs web.

Nama domain gratis selama satu tahun

Kunjungi situs web WordPress.com untuk bantuan membangun situs web →

Asisten Pembuatan Situs Web UltaHost.

Lebih dari 900 template gratis yang dapat disesuaikan, dengan kemampuan SEO yang diperlukan untuk mengoptimalkan eksposur pencarian situs web.

Penawaran 40%

Kunjungi Asisten Pembuatan Situs Web UltaHost →

File produksi yang dibuat sesuai kebutuhan, dengan desain yang minimalis.

Banyak orang, saat pertama kali menggunakannya, merasa khawatir bahwa kumpulan kelas (class libraries) yang besar akan menyebabkan ukuran file CSS menjadi terlalu besar.Tailwind CSS Dengan menggunakan PurgeCSS (yang telah terintegrasi dalam versi terbaru). @tailwindcss/jit Atau menggunakan engine terbaru untuk menyelesaikan masalah ini. Engine tersebut akan secara otomatis menganalisis file-file proyek Anda (seperti HTML, JS, komponen Vue, React), dan hanya akan mengompilasi kelas CSS yang benar-benar digunakan ke dalam file CSS untuk lingkungan produksi, sehingga menghasilkan file gaya yang sangat ringan (biasanya hanya beberapa KB saja).

Mulailah proyek Tailwind CSS pertamamu.

Tidak diperlukan perancah yang rumit; Anda dapat mengintegrasikannya dengan cepat menggunakan berbagai cara. Tailwind CSS。

Cepat rasakan pengalaman penggunaan yang lebih cepat melalui CDN (Content Delivery Network).

Untuk keperluan belajar atau desain prototipe yang sederhana, Anda dapat langsung mengunduhnya melalui tautan CDN (Content Delivery Network). Meskipun metode ini tidak memungkinkan penggunaan fitur-fitur tingkat lanjut seperti instruksi, plugin, atau optimisasi untuk produksi, metode ini sangat cocok untuk mendapatkan pengalaman penggunaan yang cepat.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
  <h1 class="text-3xl font-bold text-center text-blue-600 mt-8">
    Halo, Tailwind!
  </h1>
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md p-6 mt-4">
    Ini adalah sebuah kartu (card) yang dibangun dengan cepat menggunakan Tailwind CSS.
  </div>
</body>
</html>

Menggunakan PostCSS untuk membangun proyek formal

Untuk proyek produksi, disarankan untuk menggunakan Node.js dan PostCSS dalam proses instalasi agar semua fitur dapat diakses.

推荐阅读 Keunggulan inti dan filosofi desain Tailwind CSS.。

Pertama-tama, inisialisasikan proyek Anda menggunakan npm atau yarn, lalu instalasi dependensinya:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Ini akan menghasilkan satu nilai default. tailwind.config.js File. Selanjutnya, buatlah sebuah file CSS (misalnya…). src/input.css), dan gunakan @tailwind Instruksi untuk memasukkan berbagai lapisan dari sebuah framework.

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Kemudian, konfigurasikan alat pembangunan (seperti Vite, Webpack) untuk memproses file CSS tersebut, atau gunakan langsung alat tersebut. tailwindcss Konstruksi dilakukan menggunakan CLI (Command Line Interface).

Asisten Pembuatan Situs Web Bluehost.

Menyediakan alat pembuatan situs web AI, obrolan online dan dukungan telepon 24/7, nama domain gratis selama setahun, CDN gratis, dan SLA waktu operasional 99,99%.

Kunjungi Bluehost.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Terakhir, masukkan kode yang dihasilkan ke dalam file HTML Anda. ./dist/output.css Dokumen.

Menguasai desain responsif dan status interaksi (interactive states).

Dalam membangun situs web yang modern, aspek responsif dan umpan balik interaktif sangatlah penting.Tailwind CSS Untuk ini, telah disediakan sebuah solusi yang sangat elegan.

Responsive breakpoints yang mengutamakan penggunaan perangkat seluler

Tailwind Menggunakan sistem titik pemutusan (breakpoint) yang mengutamakan penggunaan perangkat seluler. Kelas-kelas praktis yang tersedia secara default (seperti…) .text-lg、.ml-2Tanpa prefiks, gaya tersebut berlaku untuk semua ukuran layar. Anda dapat menentukan gaya untuk ukuran layar yang lebih besar dengan menambahkan prefiks tertentu.

推荐阅读 Panduan Ultimate Tailwind CSS: Membangun Halaman Web Responsif Modern dari Nol.。

Poin pemutusan (breakpoint) defaultnya meliputi:
sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px).

Sebagai contoh, kode berikut membuat tata letak yang menumpuk di perangkat seluler dan ditampilkan berdampingan di layar berukuran sedang:

hosting.com

SSL gratis, Cloudflare CDN, WAF, 40+ pusat data global yang dapat dipilih, latensi lebih rendah di dekat lokasi Anda, dukungan layanan 24/7/365, sekarang Anda dapat menghemat biaya hingga 67%, serta dukungan untuk pengembangan AI dan optimisasi SEO.

Kunjungi hosting.com.

<div class="flex flex-col md:flex-row">
  <div class="p-4 bg-blue-200 md:w-1/2">Konten di sisi kiri.</div>
  <div class="p-4 bg-green-200 md:w-1/2">Konten di sisi kanan.</div>
</div>

Variasi status yang mudah digunakan (convenient status variants)

Dengan menambahkan prefiks “status” ke kelas-kelas praktis, Anda dapat dengan mudah mendefinisikan gaya elemen saat dalam keadaan tertentu, seperti saat dihover, difokuskan, atau diaktifkan.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300">
  点击我
</button>

Dalam kode di atas,hover:bg-blue-700 Menunjukkan bahwa warna latar belakang akan berubah menjadi biru tua ketika kursor mouse diarahkan ke atas objek tersebut.transition 和 duration-300 Maka, animasi transisi warna yang halus ditambahkan kepadanya. Dengan cara yang serupa, Anda juga dapat menggunakan… focus:、active:、disabled: Prefixes digunakan untuk mendefinisikan keadaan lainnya.

Dark mode (mode gelap) didukung.

Tailwind CSS Dukungan untuk mode gelap (dark mode) sudah terintegrasi dalam sistem ini. Pertama-tama, tailwind.config.js Aktifkan:

module.exports = {
  darkMode: 'class', // 或 'media'
  // ... 其他配置
}

Atur menjadi ‘class’ Ketika itu, Anda perlu secara manual menambahkannya ke dalam elemen akar HTML (seperti…) <html>Beralih di atas… class="dark"Atur menjadi ‘media’ Saat diaktifkan, fitur ini akan mengikuti skema warna sistem pengguna. Setelah diaktifkan, Anda dapat menggunakannya sesuai keinginan. dark: Prefixes are used to define the styles in dark mode.

<div class="bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100">
  Ganti warna latar belakang dan teks berdasarkan pola yang ditentukan.
</div>

(Keterampilan Lanjutan dan Ekosistem)

Setelah Anda memahami penggunaan dasar dengan baik, trik dan alat-alat berikut dapat membantu meningkatkan pengalaman pengembangan Anda ke tingkat yang lebih tinggi.

Mengambil komponen dan menggunakan @apply

Meskipun Tailwind Dianjurkan untuk menggunakan kelas-kelas praktis langsung dalam HTML. Namun, untuk kombinasi gaya yang kompleks yang muncul berulang-ulang dalam sebuah proyek, Anda dapat menggunakan… @apply Instruksi tersebut digunakan untuk mengekstrak “kelas komponen” dari kode CSS.

/* 在你的 CSS 文件中 */
.btn-primary {
  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
}

然后，在 HTML 中直接使用 class=“btn-primary” Cukup seperti itu. Hal ini mencapai keseimbangan antara fleksibilitas yang dibutuhkan oleh aplikasi praktis dan kemudahan pemeliharaan yang ditawarkan oleh pendekatan komponen berbasis modul.

Berbagai plugin resmi dan komunitas yang kaya akan fitur.

Tailwind CSS Mempunyai sebuah ekosistem yang penuh dengan dinamisme. Pihak resmi telah menyediakan berbagai fasilitas atau sumber daya yang mendukung perkembangan ekosistem tersebut, seperti… @tailwindcss/typography(Digunakan untuk mempercantik konten berbentuk esai.)@tailwindcss/forms(Gaya formulir yang lebih baik),@tailwindcss/aspect-ratio Selain itu, komunitas juga telah menyumbangkan banyak plugin, yang digunakan untuk integrasi ikon, animasi, peningkatan tampilan bilah gulir (scroll bar), dan lainnya, sehingga sangat memperluas kemampuan framework tersebut.

Terdapat integrasi yang mendalam dengan kerangka kerja front-end yang populer.

Tidak peduli Anda menggunakan React, Vue, Svelte, atau framework lainnya,Tailwind CSS Semuanya dapat diintegrasikan dengan mulus. Banyak alat pembangun aplikasi (framework) seperti Next.js, Nuxt.js, dan Vite menyediakan fitur yang siap digunakan langsung (tanpa perlu pengaturan tambahan). Tailwind Template. Dengan menggabungkan sistem komponen dari sebuah framework, Anda dapat membuat sebuah pustaka komponen UI yang sangat dapat digunakan kembali (reusable), memiliki gaya yang konsisten, dan mudah diperawat.

Menyimpulkan.

Tailwind CSS Bukan hanya sebuah kerangka kerja CSS, tetapi juga sebuah inovasi dalam alur kerja pengembangan front-end. Dengan konsep prioritas yang praktis, kerangka kerja ini memindahkan proses pengambilan keputusan terkait tata letak (style) dari file gaya (style sheet) ke dalam template UI yang sedang Anda bangun, sehingga menghasilkan efisiensi pengembangan yang luar biasa dan konsistensi desain yang tinggi. Mulai dari tata letak responsif hingga kondisi interaksi pengguna, dari mode gelap (dark mode) hingga optimisasi kinerja, kerangka kerja ini menyediakan solusi yang elegan dan kuat. Meskipun proses belajar awalnya memerlukan pemahaman terhadap nama-nama kelas tertentu, setelah Anda menguasainya, Anda akan mendapatkan kebebasan dan kecepatan yang belum pernah ada sebelumnya dalam membangun antarmuka pengguna. Bagi para pengembang yang mencari gaya front-end yang modern, efisien, dan mudah dikelola, kerangka kerja ini sangat cocok.Tailwind CSS Semuanya merupakan pilihan yang sangat baik untuk dipelajari secara mendalam dan diterapkan dalam lingkungan produksi.

FAQ - Pertanyaan yang Sering Diajukan.

Apakah nama kelas pada Tailwind CSS yang panjang akan membuat kode HTML menjadi kacau?

Ini memang kekhawatiran yang umum dihadapi oleh pemula. Meskipun di dalam HTML… class Properti tersebut mungkin terlihat panjang, tetapi dengan cara ini seluruh logika penataan tampilan (style logic) terkumpul di satu tempat (lapisan tampilan/visual layer), sehingga menghindari kebutuhan untuk sering beralih antara file HTML dan CSS. Dalam pengembangan nyata, dengan penggunaan komponen yang terstruktur dengan baik (seperti komponen React/Vue), nama-nama kelas tersebut akan dikemas dalam komponen yang dapat digunakan kembali (reusable components), sehingga kode tetap teratur dan mudah dibaca. Manfaat dari peningkatan kecepatan pengembangan dan konsistensi desain jauh lebih besar daripada kerugian yang ditimbulkan oleh sedikit gangguan terhadap keterbacaan kode.

Bagaimana cara mengatur ulang atau memperluas gaya (style) bawaan dari Tailwind CSS?

Semua pekerjaan kustom telah selesai. tailwind.config.js Proses tersebut dilakukan di dalam file. Anda dapat melakukannya dengan… theme.extend Anda dapat menggunakan objek untuk menambahkan nilai baru atau mengganti nilai default, misalnya dengan memperluas pilihan warna atau menambahkan ukuran spasi. Selain itu, Anda juga bisa membuat kelas-kelas baru yang berguna dengan menulis plugin. Untuk gaya yang hanya digunakan sekali saja, Anda masih bisa menulis file CSS tradisional, atau menggunakan… @apply Instruksi untuk menggabungkan kelas-kelas praktis.

Bagaimana cara membandingkan Tailwind CSS dengan pendekatan CSS-in-JS atau skema komponen gaya (style components)?

Tailwind CSS Baik CSS-in-JS (seperti Styled-components) maupun pendekatan lainnya bertujuan untuk mengatasi masalah terkait kemudahan pemeliharaan kode CSS, namun cara untuk mencapainya berbeda.Tailwind Ini adalah kerangka kerja CSS yang mengutamakan fungsionalitas praktis, sedangkan CSS-in-JS merupakan pendekatan di mana gaya (style) ditulis menggunakan JavaScript dan diterapkan secara lokal pada komponen tertentu. Kedua pendekatan tersebut dapat digunakan bersama-sama, tetapi biasanya hanya salah satunya yang dipilih. Tailwind Umumnya, kinerja saat runtime lebih baik (karena pada akhirnya hanya menggunakan kode CSS murni), ukuran paket lebih kecil (berkat fitur Purge), dan ada batasan yang lebih ketat terhadap elemen-elemen desain (design tokens).

Dalam lingkungan produksi, apakah ukuran file CSS yang dihasilkan oleh Tailwind memang kecil?

Ya, itulah yang dimaksud. Tailwind CSS Salah satu keunggulan utamanya adalah fitur Purge, yang sudah terintegrasi langsung dalam engine versi terbaru. Fitur ini menganalisis kode sumber secara statis selama proses pembangunan, mengidentifikasi semua nama kelas yang digunakan, dan hanya menyertakan gaya-gaya tersebut ke dalam file CSS yang dihasilkan. Untuk sebuah proyek tipikal, ukuran file CSS akhirnya biasanya di bawah 10 KB, yang merupakan keunggulan yang signifikan dibandingkan dengan file CSS tradisional yang seringkali berukuran ratusan KB (tanpa kompresi).

Apakah saya sebaiknya beralih dari Bootstrap ke Tailwind CSS?

Hal ini tergantung pada kebutuhan proyek Anda dan preferensi tim. Jika proyek Anda sangat bergantung pada tema dan komponen siap pakai dari Bootstrap, serta sedikit modifikasi yang dilakukan, maka migrasi mungkin tidak akan memberikan banyak manfaat. Namun, jika Anda telah menghabiskan banyak waktu untuk mengustomisasi komponen Bootstrap, sering menulis kode untuk mengganti gaya tampilannya, atau jika tim Anda menginginkan tingkat kebebasan desain dan efisiensi pengembangan yang lebih tinggi, maka migrasi ke sistem lain mungkin lebih tepat. Tailwind CSS Akan sangat bermanfaat. Disarankan untuk memulai dengan proyek baru atau modul yang terpisah, untuk menilai apakah alur kerjanya cocok dengan tim Anda.