Panduan Asas dan Praktikal untuk Tailwind CSS: Membina Antaramuka Responsif yang Moden dari Kosong

Apa itu Tailwind CSS?

Tailwind CSS adalah sebuah rangka kerja CSS yang mengutamakan kefungsionaliti, yang membantu pembangun membina antara muka pengguna yang diperibadikan dengan cepat dengan menyediakan sebilangan besar kelas berguna (Utility Classes) yang boleh digabungkan. Berbeza dengan rangka kerja seperti Bootstrap yang menyediakan komponen prabina, Tailwind CSS tidak menyediakan komponen yang lengkap sepenuhnya, sebaliknya ia menawarkan kelas CSS yang terperinci dan berstruktur, membolehkan anda menulis gaya secara langsung dalam kod HTML.

Konsep utamanya adalah “kegunaan yang diutamakan”. Ini bermakna anda tidak perlu berulang kali bertukar antara fail CSS dan fail HTML, dan juga tidak perlu memikirkan dengan teliti nama kelas untuk komponen-komponen tersebut. .card__header--activeAnda hanya perlu menggabungkan satu siri kelas alat yang bersifat deskriptif untuk mencapai sebarang reka bentuk yang diinginkan. Sebagai contoh, untuk membuat kad dengan tepi bulat, padding dalaman, dan bayangan, anda hanya perlu menulis kod yang sesuai. class="rounded-lg p-6 shadow-md"Cara ini telah meningkatkan kecekapan pembangunan dengan ketara, serta memastikan konsistensi dalam gaya reka bentuk (style) aplikasi tersebut.

Pembinaan persekitaran dan konfigurasi asas.

Terdapat beberapa cara untuk mula menggunakan Tailwind CSS, dan yang paling popular adalah dengan mengintegrasikannya dengan alat baris perintah (command-line tool) dan proses pembinaan projek (project build process).

Diperoleh daripada WEB\nDisyorkan untuk membaca. Membuka Potensi Tailwind CSS: Panduan Praktikal Dari Asas Hingga Lanjutan。

Memasang pakej-pakej asas melalui npm

Pertama sekali, anda perlu memasang Tailwind CSS dan kebergantungannya melalui npm atau yarn. Jalankan arahan berikut di direktori akar projek anda:

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 postcss autoprefixer
npx tailwindcss init

Ini akan memasang Tailwind CSS, PostCSS yang digunakan untuk mengurus kod CSS, serta Autoprefixer yang akan menambahkan prefiks secara automatik ke kod CSS tersebut untuk keserasian dengan pelbagai pelayar web.npx tailwindcss init Arahan tersebut akan menjana sebuah fail konfigurasi lalai. tailwind.config.js。

Menyediakan laluan kandungan dan menghasilkan kod CSS

Seterusnya, anda perlu mengkonfigurasi tailwind.config.js Fail ini menentukan fail-fail yang perlu disemak oleh Tailwind untuk menghasilkan gaya yang sesuai. content Tambahkan laluan fail templat anda ke dalam array.

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

Kemudian, buat sebuah fail CSS utama (contohnya: src/input.css), dan tambahkan arahan-arahan dari Tailwind.

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

Akhirnya, jalankan proses pembinaan melalui baris arahan untuk mengubah kod CSS yang anda masukkan menjadi fail gaya yang boleh digunakan dengan segera.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Tailwind CSS: Panduan Praktikal dari Pemula hingga Profesional.。

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

Sekarang, anda boleh memasukkan kandungan yang dihasilkan ke dalam HTML. ./dist/output.css Anda telah memuat turun fail tersebut dan mula menggunakan kelas-kelas praktikal yang disediakan oleh Tailwind.

Kelas-kelas praktikal teras dan reka bentuk responsif.

Kelas-kelas praktikal Tailwind CSS meliputi hampir semua atribut CSS, dan mengikuti sistem penamaan serta token reka bentuk yang ketat.

Senarai ringkas alat-alat yang sering digunakan.

Nama untuk kelas alat biasanya dipadankan secara langsung dengan atribut CSS dan menggunakan singkatan. Sebagai contoh:
* Jarak:p-4 padding: 1rem;, m-2 (margin: 0.5rem), space-x-4 (Jarak antara elemen anak secara horizontal.)
* Pemformatan:text-lg (Saiz fon), font-bold (Kelebaran font), text-center (Penjajaran teks).
* Warna:bg-blue-500 (Warna latar belakang), text-gray-800 (Warna teks), border-red-300 (Warna bingkai).
* Susun atur:flex, items-center (align-items: center), justify-between (justify-content: space-between).
* Saiz:w-64 (lebar: 16rem), h-full (Ketinggian: 100%).
* 效果：rounded (Bulat tepi), shadow (Shade), opacity-50 (Ketelusan).

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.

Mencapai susun atur responsif.

Tailwind menggunakan sistem pemotongan (breakpoint) yang mengutamakan peranti mudah alih. Kelas-kelas praktikal yang disediakan secara lalai direka khusus untuk peranti mudah alih, dan untuk mengaplikasikan gaya pada skrin yang lebih besar, anda perlu menambahkan prefiks responsif yang sesuai.
Prefiks titik putus (breakpoint) termasuk:sm: (640px), md: (768px), lg: (1024px), xl: (1280px), 2xl: (1536px).

Sebagai contoh, kod berikut mencipta susun atur yang menggunakan tata letak “stacked” lalai, di mana elemen-elemen disusun bersebelahan pada skrin bersaiz sederhana:

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

Dengan menggabungkan prefiks-prefiks ini, anda boleh dengan mudah membina antara muka responsif yang kompleks yang sesuai untuk semua saiz skrin.

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

Pengalaman praktikal: Membina komponen bar navigasi

Mari kita gabungkan semua 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.

Menulis struktur asas dan gaya (basic structure and styling)

Pertama sekali, kita membuat kerangka HTML untuk bar navigasi dan mengaplikasikan gaya asas kepadanya.

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

<nav class="bg-gray-800 shadow-lg">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- 网站Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="text-white font-bold text-xl">My Brand</a>
      </div>
      <!-- 桌面端导航链接 -->
      <div class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Laman utama</a>
          <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Tentang kami</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">perkhidmatan</a>
          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Hubungi</a>
        </div>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700">
          <!-- 汉堡菜单图标（简化版） -->
          <span class="sr-only">Buka menu utama.</span>
          <svg class="block h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>
</nav>

Pada masa ini, navigasi pada skrin desktop telah selesai. Kita menggunakan… hidden md:block Kawal pautan navigasi pada skrin desktop untuk hanya dipaparkan pada skrin bersaiz sederhana dan lebih besar.

Menambah interaktiviti dan menu mudah alih

Untuk menunjukkan menu apabila butang ditekan pada peranti mudah alih, kita perlu menggunakan sedikit JavaScript. Di sini, kita menggunakan JavaScript asli yang ringkas untuk menukar kelas yang mengawal penunjukan menu.
Pertama sekali, tambahkan ID kepada butang menu dan kandungan menu, dan ubah butang menu tersebut agar dapat memanggil fungsi yang diinginkan.

<!-- 修改后的移动端菜单按钮 -->
<button id="mobile-menu-button" type="button" class="..."> ... </button>

<!-- 新增的移动端菜单内容，初始隐藏 -->
<div id="mobile-menu" class="md:hidden hidden">
  <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Laman utama</a>
    <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Tentang kami</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">perkhidmatan</a>
    <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Hubungi</a>
  </div>
</div>

Kemudian, tambahkan skrip di bahagian bawah halaman.

<script>
  const menuButton = document.getElementById('mobile-menu-button');
  const mobileMenu = document.getElementById('mobile-menu');

menuButton.addEventListener('click', () => {
    // 切换 'hidden' 类来显示/隐藏菜单
    mobileMenu.classList.toggle('hidden');
  });
</script>

Setakat ini, sebuah bar navigasi responsif yang lengkap telah dibina. Dengan menggabungkan kelas-kelas praktikal yang berbeza, kami telah mencapai komponen ini tanpa perlu menulis sebaris kod CSS yang disesuaikan pun.

RINGKASAN

Tailwind CSS telah mengubah sepenuhnya cara pengembang menulis gaya (styles) melalui konsepnya yang mengutamakan kepraktisan. Ia memindahkan proses membuat keputusan berkaitan gaya daripada fail CSS ke dalam template HTML, dan dengan menggabungkan kelas-kelas alat yang bersifat terperinci (fine-grained), ia mencapai kecekapan pengembangan yang sangat tinggi serta konsistensi reka bentuk yang baik. Dari konfigurasi persekitaran, penggunaan kelas alat utama, hingga sistem titik pemutusan responsif (responsive breakpoints) dan pembinaan komponen praktikal, Tailwind menyediakan satu set alat yang lengkap dan efisien untuk pengembangan antaramuka yang moden.

Walaupun pada mulanya perlu menghafal sejumlah besar nama kelas, namun peraturan penamaan yang mudah difahami dan dokumentasi yang berkualiti tinggi membolehkan anda memulakan penggunaannya dengan cepat. Bagi pasukan dan projek yang mementingkan kelajuan pembangunan, kebebasan reka bentuk, serta kawalan saiz fail yang dihasilkan, Tailwind CSS merupakan penyelesaian yang kuat dan elegan.

FAQ - Soalan Lazim

Adakah fail-fail gaya Tailwind CSS terlalu besar?

Tidak. Tailwind CSS menggunakan teknologi PurgeCSS (kini dikenali sebagai Content Scanning) dalam persekitaran produksi. Teknologi ini menganalisis fail-fail projek anda dan hanya mengumpulkan kelas-kelas yang sebenarnya digunakan ke dalam fail CSS akhir. Ini memastikan bahawa fail CSS yang dihasilkan sangat ringan, biasanya berukuran beberapa KB hingga belasan KB sahaja.

Berbanding dengan Bootstrap, apakah kelebihan utama Tailwind CSS?

Tailwind CSS menawarkan lebih banyak kebebasan untuk penyesuaian. Bootstrap menyediakan komponen-komponen siap yang mempunyai rupa tertentu, dan untuk membuat penyesuaian, anda perlu menutupi sejumlah besar kod CSS. Sebaliknya, Tailwind menyediakan gaya asas (“materials”) yang boleh digabungkan untuk mencipta komponen-komponen unik yang sesuai sepenuhnya dengan reka bentuk yang diinginkan. Ini membuatkannya lebih mudah untuk tidak bercanggah dengan gaya lalai framework, serta mengelakkan kod CSS yang berlebihan.

Dalam projek berkumpulan, bagaimanakah untuk mengekalkan konsistensi kod Tailwind CSS?

Kita boleh menggabungkan penggunaan fail konfigurasi Tailwind CSS dengan plugin IDE. tailwind.config.js Warna, jarak, jenis font, dan lain-lain elemen reka bentuk projek ditentukan secara seragam. Ahli pasukan boleh menggunakan tambahan rasmi untuk VS Code atau IntelliJ IDE, yang menyediakan fungsi autocompletion, penyorotan sintaks, dan pra-tontonan apabila kursor diletakkan di atas elemen tertentu. Ciri-ciri ini dapat membantu mengurangkan ralat ejaan dalam nama kelas dan meningkatkan kecekapan pembangunan.

Bagaimana untuk menguruskan keadaan hover atau focus yang kompleks dalam Tailwind CSS?

Tailwind CSS menyediakan pelbagai prefiks untuk variasi keadaan (state variations), seperti… hover:, focus:, active:, disabled: Dan sebagainya. Anda boleh dengan mudah menambahkannya di hadapan mana-mana kelas alat (tool class). Sebagai contoh,hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 Anda boleh menentukan warna latar belakang butang ketika ia diletakkan di atas kursor (dihidupkan) dan kontur berbentuk lingkaran ketika butang itu mendapat fokus.