Pengenalan dan Amalan Tailwind CSS: Membina Laman Web Responsif Moden dari Kosong

Apa itu Tailwind CSS?

Dalam dunia pembangunan web, pelbagai rangka kerja CSS (Cascading Style Sheets) muncul dengan cepat.Tailwind CSSIa menonjol dengan konsep uniknya yang mengutamakan fungsi (Utility-First). Ia bukanlah satu set antaramuka pengguna (UI) yang menyediakan komponen yang telah ditentukan terlebih dahulu, tetapi merupakan satu koleksi kelas CSS peringkat rendah yang mempunyai kekhususan yang terperinci. Pembangun boleh menggabungkan kelas-kelas CSS yang terpisah ini untuk mencipta reka bentuk yang sesuai dengan keperluan mereka.text-center、mt-4、bg-blue-500Membina reka bentuk yang benar-benar disesuaikan secara langsung dalam HTML. Pendekatan ini telah mengubah sepenuhnya cara pembangun menulis gaya (style), dengan memindahkan keputusan berkaitan gaya daripada fail CSS kembali ke dalam bahasa penandaan (markup) atau templat, mencapai penggabungan yang erat antara gaya dan struktur. Ini seterusnya membawa kelajuan dan fleksibiliti pembangunan yang belum pernah terjadi sebelumnya.

Berbanding dengan CSS tradisional atau rangka kerja seperti Bootstrap,Tailwind CSSKelebihan utama terletak pada pengelakan masalah penamaan komponen dan pengembangan yang tidak terkawal pada fail gaya (style sheets). Anda tidak perlu lagi memikirkan nama kelas untuk setiap komponen dengan susah payah, mahupun mengurus fail CSS yang besar dan semakin tidak selaras dengan struktur HTML. Semua gaya ditunjukkan melalui satu set kelas yang direka dengan teliti dan konsisten, yang menjadikan pembinaan antara muka yang responsif dan interaktif menjadi lebih mudah dan cekap.

Bagaimana untuk memasang dan mengkonfigurasi?

Untuk mula menggunakannya, sila ikuti langkah-langkah yang diberikan.Tailwind CSSAnda boleh mengintegrasikannya ke dalam projek anda dengan pelbagai cara. Cara yang paling popular adalah melalui pengurus pakej Node.js (seperti npm atau yarn) untuk melakukan pemasangan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Dari Pemula hingga Pakar dengan Tailwind CSS: Panduan Praktikal untuk Membina Laman Web Responsif Moden。

Pertama sekali, di dalam direktori akar projek anda, lakukan penginisian npm (jika belum dilakukan), kemudian pasangnya.Tailwind CSSDan kebergantungannya.

Pembantu Pembinaan Laman Web WordPress.com

99.999% ketersediaan + kegagalan bencana merentas zon, sokongan 24 jam sehari, gunakan AI untuk membina laman web secara percuma apabila membeli pakej blog.

Nama domain percuma selama setahun

Kunjungi laman bantuan pembinaan laman web WordPress.com →

Pembantu Pembinaan Laman Web UltaHost

Lebih daripada 900 templat percuma yang boleh disesuaikan, dapatkan kemahiran SEO yang anda perlukan untuk meningkatkan pendedahan carian laman web anda.

Tawaran Istimewa 40%

Kunjungi laman bantuan pembinaan laman web UltaHost →

npm install -D tailwindcss
npx tailwindcss init

Melaksanakannpx tailwindcss initArahan tersebut akan menjana satu fail yang bernama…tailwind.config.jsFail konfigurasi ini adalah untuk penyesuaian khusus.Tailwind CSSPusat pengurusan projek (Project Management Center). Di sini, anda boleh menentukan warna tema projek, jenis font, titik pemotongan (breakpoints), plugin, dan lain-lain. Konfigurasi yang sangat ringkas mungkin kelihatan seperti berikut, yang menentukan…Tailwind CSSFile-file manakah yang perlu diskan untuk proses pembersihan gaya (Purge)?

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Seterusnya, anda perlu memasukkan pelbagai komponen Tailwind ke dalam fail CSS utama projek. Biasanya, fail tersebut diberi nama “styles.css”.src/styles.css或input.css。

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

Akhirnya, anda memerlukan satu proses pembinaan untuk mengurus arahan-arahan yang diberikan di atas dan mengkompilasikannya menjadi kod CSS yang akhir. Anda boleh menggunakan…PostCSSKerjasamatailwindcssPlugin, atau gunakan secara langsung.Tailwind CLIAlat. Contoh arahan pembinaan menggunakan CLI:

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

Arahan ini akan mendengar (mengawasi) aktiviti atau isyarat tertentu../src/input.cssPerubahan pada fail tersebut akan dikompilasi secara masa nyata dan dihasilkan sebagai output../dist/output.cssAnda hanya perlu membuat pautan dalam HTML ke hasil yang dihasilkan akhirnya.output.cssCukup fail itu sahaja.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pengenalan dan amalan Tailwind CSS: Membina antaramuka responsif moden dari awal.。

Kelas-kelas praktikal teras dan reka bentuk responsif.

Tailwind CSSKekuatan tersebut terletak pada kelas-kelas praktikal yang besar dan teratur yang disediakan. Kelas-kelas ini hampir meliputi semua atribut CSS yang biasa digunakan, dan mengikuti satu set peraturan penamaan yang konsisten.

Layout dan Jarak (Layout and Spacing)

Mengawal susun atur dan jarak antara elemen-elemen adalah tindakan yang paling kerap dilakukan dalam proses pembangunan harian.Tailwind CSSTerdapat pelbagai kelas yang disediakan untuk pelaksanaan tersebut. Sebagai contoh,flex、gridDigunakan untuk membuat reka letak (layout).m-4(Margin)p-6(Padding) digunakan untuk mengawal jarak antara elemen-elemen dalam dan luar sesuatu reka bentuk. Nombor yang digunakan biasanya merujuk kepada unit “rem” (secara lalai, ia merupakan gandaan daripada 0.25rem).m-autoIni bermakna margin luaran akan ditetapkan secara automatik.

<div class="flex justify-between items-center p-6">
  <div class="m-2">Projek Satu</div>
  <div class="m-2">Projek Dua</div>
</div>

Warna dan Latar Belakang

Sistem warna merupakan sebahagian daripada penyesuaian tema (thematization). Anda boleh menggunakan alat atau kaedah seperti…text-gray-800Menetapkan warna teksbg-blue-500Set warna latar belakang.border-red-300Menetapkan warna garis tepi. Nombor (50 hingga 900) mewakili gradien kegelapan warna, yang menyediakan konsistensi reka bentuk yang sangat tinggi.

Pembantu Pembinaan Laman Web Bluehost

Menyediakan alat penciptaan laman web AI, sokongan chat dalam talian dan telefon 24/7, nama domain percuma setahun, CDN percuma, dan SLA waktu operasi 99.99%.

Kunjungi Bluehost.

Responsive Breakpoints

Mengimplementasikan reka bentuk responsif adalah…Tailwind CSSKelebihannya adalah ia menyediakan lima prefiks titik henti (breakpoint) secara lalai:sm:、md:、lg:、xl:、2xl:Anda boleh menambahkan prefiks ini di hadapan mana-mana kelas praktikal untuk menentukan bahawa gaya tersebut akan berkesan pada lebar skrin tertentu atau lebih.

<div class="text-center md:text-left lg:flex">
  <p class="w-full lg:w-1/2">Pada telefon bimbit, saya dipaparkan secara berpusat (centered). Pada skrin bersaiz sederhana, saya diselaraskan ke kiri (aligned to the left). Pada skrin yang lebih besar, saya berada dalam sebuah kontainer fleksibel (flex container) dan lebarnya adalah separuh daripada lebar skrin tersebut.</p>
</div>

Metode “mobile-first” ini bermakna gaya yang tidak mempunyai prefiks (prefix) sesuai untuk semua skrin, manakala gaya yang mempunyai prefiks akan menggantikan gaya yang digunakan untuk skrin yang lebih besar. Ini menjadikan pembinaan reka bentuk responsif yang kompleks menjadi sangat jelas dan mudah.

Pengalaman Praktikal: Membina Komponen Kad (Card Component)

Mari kita gabungkan semua pengetahuan yang telah kita pelajari sebelum ini dengan membina sebuah komponen kad responsif yang moden. Komponen kad ini akan merangkumi gambar profil, tajuk, teks deskripsi, dan butang tindakan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pengenalan dan amalan Tailwind CSS: Panduan praktikal untuk membina laman web responsif moden.。

Pertama sekali, kita membina kontainer asas untuk kad tersebut, menggunakan sudut bulat, bayangan, dan padding untuk menentukan hierarki visual kad.

<div class="max-w-sm rounded-2xl overflow-hidden shadow-lg bg-white p-6">
  <!-- 卡片内容将放在这里 -->
</div>

Seterusnya, di dalam kontena tersebut, kita mencipta susun atur fleksibel (flex layout) untuk mengatur susunan gambar profil (avatar) dan maklumat pengguna.

hosting.com

SSL percuma, Cloudflare CDN, WAF, 40+ pusat data global untuk dipilih, latensi rendah berhampiran, 24/7/365 sokongan perkhidmatan, kini anda boleh menjimatkan kos sehingga 67%, sokongan pembinaan AI dan pengoptimuman SEO.

Kunjungi hosting.com

<div class="flex items-center space-x-4 mb-4">
  <img class="w-12 h-12 rounded-full object-cover" src="/avatar.jpg" alt="Gambar Profil Pengguna">
  <div>
    <h3 class="text-xl font-bold text-gray-900">Zhang San</h3>
    <p class="text-gray-500">Frontend Development Engineer</p>
  </div>
</div>

Kemudian, tambahkan kandungan deskripsi utama untuk kad tersebut.

<p class="text-gray-700 mb-6">
  Ini adalah satu contoh penggunaan…<code data-no-auto-translation="">Tailwind CSS</code>Komponen kad contoh yang dibina. Ia menunjukkan bagaimana elemen UI yang mempunyai reka bentuk visual yang baik dan responsif sepenuhnya dapat diwujudkan dengan cepat dengan menggabungkan kelas-kelas yang berguna.
</p>

Akhir sekali, kita tambah butang. Dengan menggunakan prefiks responsif, butang tersebut akan mengisi seluruh lebar skrin pada skrin kecil, dan lebarnya akan menyesuaikan diri dengan kandungan pada skrin besar.

<button class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition duration-300 ease-in-out transform hover:-translate-y-1">
  了解更多
</button>

Dengan menggabungkan semua kod tersebut, anda akan mendapat komponen kad yang lengkap. Anda boleh menyesuaikannya mengikut keperluan anda.max-w-smNilai untuk padding atau prefix bagi titik pemutusan (breakpoint) boleh disesuaikan dengan mudah untuk memastikan ia berfungsi dengan baik pada peranti yang berbeza. Amalan ini menunjukkan dengan jelas…Tailwind CSS“Reka bentuk dalam penandaan” (Design within Tags) – Aliran kerja yang cekap.

RINGKASAN

Tailwind CSSIa bukan sekadar sebuah rangka kerja CSS (Cascading Style Sheets), tetapi juga mewakili paradigma pembangunan reka bentuk web moden yang cekap dan mudah diselenggara. Dengan kelas-kelas praktikal yang telah dibahagikan kepada komponen yang lebih kecil (atomized components), pembangun dapat membina antara muka pengguna yang unik dengan cepat, sambil mengekalkan konsistensi dan kawalan yang tinggi terhadap kod. Sistem reka bentuk responsif yang terbina dalamnya serta tema-tema yang sangat boleh disesuaikan, memudahkan penyesuaian untuk pelbagai peranti dan penyesuaian jenama. Walaupun pada mulanya memerlukan penghafalan beberapa nama kelas, kecekapan pembangunan yang diperoleh dan beban mental yang berkurangan setelah menguasainya adalah sesuatu yang sukar dicapai dengan kaedah CSS tradisional. Bagi pasukan dan pembangun individu yang mementingkan kelajuan pembangunan, kebebasan reka bentuk, dan prestasi produk akhir, ini merupakan pilihan yang sangat berharga.Tailwind CSSTidak diragukan lagi, ini merupakan alat yang sangat berkuasa.

FAQ - Soalan Lazim

Adakah Tailwind CSS menyebabkan kod HTML menjadi berlebihan (bloaty)?

Memang benar, menulis sejumlah besar nama kelas secara langsung dalam HTML akan menjadikan tag-tag tersebut kelihatan lebih panjang dan lebih rumit.Tailwind CSSKekurangan yang paling sering disebutkan.

Namun, “kegemukan” ini (overcomplicated structure) mempunyai makna positif dalam praktik. Ia mengikat gaya (style) dengan struktur (structure) dengan erat, membolehkan kita memahami gaya elemen-elemen dengan mudah semasa membaca kod HTML, tanpa perlu berulang-alik antara fail HTML dan CSS. Bagi projek yang menggunakan rangka kerja berkomponen (seperti React, Vue), nama kelas-kelas tersebut disimpan di dalam komponen-komponen tersebut, yang sebenarnya meningkatkan kemudahan penyelenggaraan (maintainability). Selain itu, melalui fungsi “pembersihan” (purge) oleh alat pembinaan (build tools), fail CSS yang dihasilkan akan sangat ringan, hanya mengandungi gaya-gaya yang benar-benar digunakan, dan dari segi prestasi, ia biasanya lebih baik daripada CSS yang ditulis secara manual atau menggunakan rangka kerja tradisional.

Bagaimana untuk menyesuaikan warna tema atau jarak antara elemen-elemen dalam aplikasi?

Tema yang disesuaikan biasanya dibuat dengan mengubah kandungan dalam direktori akar projek.tailwind.config.jsKonfigurasi fail perlu diselesaikan.

Dalam fail konfigurasitheme.extendUntuk sebahagian daripada konfigurasi, anda boleh menambah atau menggantikan nilai tema lalai. Sebagai contoh, untuk menambah warna jenama, anda boleh mengkonfigurasikannya seperti berikut:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1a73e8',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
}

Setelah konfigurasi selesai, anda boleh menggunakannya dalam projek anda.bg-brand-blue或w-128Inilah contoh kelas yang dibuat secara khusus (custom classes). Pendekatan ini memastikan bahawa sistem reka bentuk anda kekal konsisten sepanjang projek tersebut.

Ia sesuai untuk digunakan bersama dengan rangka kerja front-end yang mana?

Tailwind CSSIa dapat berintegrasi dengan hampir semua rangka kerja dan perpustakaan front-end moden dengan sempurna, dan ini juga merupakan salah satu sebab utama kepopulernya.

Dalam rangka kerja berkomponen seperti React, Vue, Angular, atau Svelte, anda boleh menggunakan kelas Tailwind dalam templat komponen dengan cara yang sama seperti dalam HTML biasa. Banyak alat pembina rangka kerja (seperti Next.js, Vite) menyediakan sokongan untuk Tailwind yang sedia untuk digunakan.Tailwind CSSPilihan integrasi. Selain itu, seperti…@tailwindcss/forms、@tailwindcss/typographyPlugin rasmi seperti ini dapat menyelesaikan masalah berkaitan gaya bentuk borang (form styles) dan gaya teks kaya (rich text styles) dengan lebih baik, dalam situasi-situasi tertentu, dan seterusnya meningkatkan pengalaman pembangunan semasa bekerjasama dengan pelbagai rangka kerja (frameworks).

Adakah fail CSS akhir dalam persekitaran produksi akan menjadi sangat besar?

Tidak akan. Itulah sebenarnya yang dimaksudkan.Tailwind CSSSatu kelebihan utama dari segi reka bentuk: Walaupun versi pembangunan mengandungi semua kelas yang mungkin, saiz failnya menjadi agak besar, tetapi ini hanya dilakukan untuk kemudahan pembangunan.

Pada fasa pembinaan produksi,Tailwind CSSIa akan menganalisis fail templat anda melalui mekanisme “Purge”nya (dipanggil “Content Scanning” dalam versi 3.0 dan ke atas),tailwind.config.js的content(Hanya kelas CSS yang sebenarnya digunakan akan dimasukkan ke dalam fail CSS akhir.) Ini bermakna fail CSS yang dihasilkan biasanya berukuran beberapa KB hingga belasan KB, yang jauh lebih kecil daripada banyak fail CSS yang ditulis secara manual atau fail CSS dari rangka kerja UI yang tidak dioptimumkan, sekali gus memastikan prestasi pemuatan yang lebih baik.