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

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

Akhir sekali, konfigurasikan proses pembinaan (build process). Jika anda menggunakan alat seperti Vite, anda perlu memastikan bahawa konfigurasi PostCSS adalah betul. Buatlah satu konfigurasi yang sesuai. postcss.config.js Dokumen.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Sekarang, jalankan arahan pembinaan (contohnya…) npm run buildIa bergantung pada konfigurasi skrip anda; Tailwind akan menguruskan fail CSS anda dan menghasilkan gaya yang akhir. Selepas itu, anda boleh mula menggunakan kelas-kelas praktikal yang disediakan oleh Tailwind dalam kod HTML anda.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Tailwind CSS: Panduan Praktikal dan Amalan Terbaik Dari Permulaan Hingga Kemahiran Lanjutan。

Kelas-kelas praktikal teras dan reka bentuk responsif.

Kelas-kelas praktikal Tailwind meliputi pelbagai aspek CSS, daripada reka letak, jarak antara elemen, pemformatan teks hingga latar belakang, garis tepi, dan efek visual. Sistem reka bentuknya sangat konsisten; sebagai contoh, jarak antara elemen menggunakan nisbah yang seragam (seperti kelipatan 0.25rem), dan warna-warna disediakan dalam palet yang telah ditentukan terlebih dahulu.

Kelas untuk susun atur dan jarak (Layout and Spacing Classes)

Kelas-kelas yang berkaitan dengan reka letak (layout) seperti… flex, grid, block, inline-block Boleh digunakan terus. Jarak antara komponen ditentukan melalui… p-{size}(Padding) dan m-{size}(Margin) digunakan untuk mengawal, sebagai contoh… p-4 Menunjukkan padding sebanyak 1rem.mt-2 Menunjukkan margin atas sebanyak 0.5rem.

<div class="flex p-4 space-x-4">
  <div class="p-2 bg-gray-200">Projek Satu</div>
  <div class="p-2 bg-gray-200">Projek Dua</div>
</div>

Prefix for responsive breakpoints

Reka bentuk responsif Tailwind merupakan salah satu ciri terkuatnya. Ia mempunyai lima titik pemutusan (breakpoints) lalai yang telah disediakan:sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Dengan menambahkan prefiks “breakpoint” sebelum kelas yang berkaitan, anda boleh dengan mudah mencipta antara muka yang responsif. Sebagai contoh,md:flex Menunjukkan penggunaan reka bentuk yang fleksibel untuk skrin bersaiz sederhana dan lebih besar.text-center lg:text-left Menunjukkan penempatan yang disetkan secara lalai (di tengah), tetapi pada skrin yang lebih besar, teks akan diselaraskan ke kiri.

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.

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 p-4">Kandungan di sebelah kiri</div>
  <div class="w-full md:w-1/2 p-4">Kandungan di sebelah kanan.</div>
</div>

Pengalaman Praktikal: Membina Bar navigasi yang responsif

Mari kita menggabungkan pengetahuan yang telah kita pelajari dengan membina sebuah bar navigasi yang responsif. Bar navigasi ini akan dipaparkan secara horizontal pada skrin yang besar, dan akan berubah menjadi menu hamburger apabila digunakan pada skrin yang kecil.

Pertama sekali, kita akan menulis struktur navigasi horizontal untuk skrin besar.

<nav class="bg-gray-800 p-4">
  <div class="container mx-auto flex justify-between items-center">
    <!-- 品牌 Logo -->
    <a href="#" class="text-white text-xl font-bold">My Brand</a>
    <!-- 桌面端导航链接 -->
    <div class="hidden md:flex space-x-4">
      <a href="#" class="text-gray-300 hover:text-white">Laman utama</a>
      <a href="#" class="text-gray-300 hover:text-white">Mengenai</a>
      <a href="#" class="text-gray-300 hover:text-white">perkhidmatan</a>
      <a href="#" class="text-gray-300 hover:text-white">Hubungi</a>
    </div>
    <!-- 移动端菜单按钮 -->
    <button id="menuBtn" class="md:hidden text-white">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">...</svg>
    </button>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobileMenu" class="md:hidden hidden mt-2">
    <a href="#" class="block text-gray-300 hover:text-white py-2">Laman utama</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">Mengenai</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">perkhidmatan</a>
    <a href="#" class="block text-gray-300 hover:text-white py-2">Hubungi</a>
  </div>
</nav>

Tambahkan ciri interaktif

Struktur HTML di atas dilaksanakan melalui… hidden 和 md:flex Kelas-kelas yang berkaitan telah melaksanakan reka bentuk yang responsif (boleh menyesuaikan diri dengan peranti yang digunakan). Untuk mengaktifkan atau menonaktifkan penunjuk menu pada peranti mudah alih, kita memerlukan sedikit kod JavaScript yang ringkas.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Terakhir CSS Tailwind: Pelajaran Praktikal Dari Permulaan Hingga Kemahiran Lanjutan。

// 简单的菜单切换逻辑
document.getElementById('menuBtn').addEventListener('click', function() {
  const menu = document.getElementById('mobileMenu');
  menu.classList.toggle('hidden');
});

Contoh ini menunjukkan bagaimana anda boleh membina komponen responsif yang lengkap dengan fungsi dan mempunyai penampilan yang profesional dengan cepat, hanya menggunakan kelas-kelas praktikal dari Tailwind dan satu fungsi JavaScript yang mudah. Anda boleh dengan mudah menyesuaikan penampilannya untuk memenuhi reka bentuk jenama anda dengan mengubah warna latar belakang, jarak antara elemen, kesan hover, dan kelas-kelas lain.

RINGKASAN

Tailwind CSS telah mengubah sepenuhnya cara pembangun front-end menulis gaya (styles) melalui metodologinya yang berfokuskan pada kegunaan kelas praktikal. Ia mengurangkan kos peralihan konteks yang kerap antara fail HTML dan CSS, memastikan konsistensi antara elemen UI melalui sistem reka bentuk yang terstruktur, dan meningkatkan prestasi aplikasi hasil daripada pengoptimuman yang canggih semasa proses pembinaan (build-time optimization). Dari prototaip yang ringkas hingga aplikasi perusahaan yang kompleks, Tailwind menyediakan pengalaman pembangunan dan kemudahan penyelenggaraan yang cemerlang. Menguasai kelas-kelas praktikal utamanya, prefiks responsif, serta kaedah konfigurasi akan meningkatkan kecekapan dan kemampuan anda dalam pembangunan front-end dengan ketara.

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

FAQ - Soalan Lazim

Adakah fail CSS yang dihasilkan oleh Tailwind CSS akan menjadi sangat besar?

Tidak, itulah kehebatan reka bentuk Tailwind. Pada fasa pembinaan produksi, Tailwind menggunakan PurgeCSS (yang kini telah diintegrasikan ke dalam enjinnya) untuk “menghilangkan” kod yang tidak diperlukan, dan hanya menyimpan kelas CSS yang sebenarnya digunakan dalam fail-fail template HTML, JavaScript, dan lain-lain. Fail CSS yang dihasilkan akhirnya biasanya berukuran beberapa KB hingga beberapa puluh KB sahaja, yang jauh lebih kecil berbanding dengan banyak rangka kerja CSS tradisional.

Adakah menulis begitu banyak nama kelas dalam HTML akan menjadikan kod sukar untuk dibaca dan diselenggara?

Ini memang merupakan kebimbangan biasa pada peringkat awal. Amalan menunjukkan bahawa meletakkan gaya (style) dan struktur (structure) berhampiran antara satu sama lain sebenarnya mengurangkan beban kognitif semasa mencari dan memodifikasi gaya tersebut. Bagi komponen yang kompleks, anda boleh menggunakan Tailwind untuk membantu mengurusnya dengan lebih mudah. @apply Arahan tersebut menyatakan agar kelas-kelas praktikal yang sering digunakan dikeluarkan ke dalam fail CSS, dan kelas komponen khusus dibina berdasarkan kelas-kelas tersebut. Selain itu, penambahan extension yang baik pada editor (seperti Tailwind CSS IntelliSense) dapat menyediakan fungsi autocompletion dan preview ketika kursor diletakkan di atas kod tertentu, yang sangat meningkatkan pengalaman pembangunan.

Tailwind CSS sesuai digunakan bersama-sama dengan pelbagai rangka kerja JavaScript. Berikut adalah beberapa contoh popular:

Tailwind CSS tidak bergantung pada mana-mana rangka kerja (framework), dan ia boleh digabungkan dengan sempurna dengan mana-mana rangka kerja atau perpustakaan front-end. Ia mendapat sokongan yang sangat baik dan digunakan secara meluas dalam rangka kerja seperti React, Vue.js, Angular, Svelte, serta alat pembinaan laman web statik tradisional seperti Next.js, Nuxt.js, Gatsby, dan Hugo. Proses kerjanya (mengimbas fail dan menjana gaya) boleh disatukan dengan lancar ke dalam rangkaian alat pembinaan (build tools) tersebut.

Bagaimana untuk menyesuaikan tema lalai Tailwind, seperti warna jenama?

Tema yang disesuaikan biasanya dibuat dengan mengubah kandungan dalam direktori akar projek. tailwind.config.js Konfigurasi fail perlu disiapkan terlebih dahulu. Anda boleh melakukannya dengan mengikuti arahan yang diberikan. theme.extend Tambah atau gantikan nilai lalai dalam objek tersebut. Sebagai contoh, untuk menambah warna jenama yang dikustomisasi, konfigurasinya boleh dilakukan seperti ini:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      }
    }
  }
}

Setelah konfigurasi selesai, anda boleh menggunakannya dalam projek anda. bg-brand-blue 或 text-brand-blue Kelas seperti ini membenarkan penggunaan kaedah yang serupa untuk menyesuaikan semua dimensi utama, jenis fon, titik pemutusan (breakpoints), dan lain-lain.