Membina laman web responsif moden menggunakan Tailwind CSS: dari permulaan hingga panduan amali.

Apa itu Tailwind CSS?

Tailwind CSS adalah sebuah rangka kerja CSS yang mengutamakan fungsi, yang membantu pembangun membina antara muka pengguna dengan cepat dengan menyediakan satu siri kelas praktikal yang bersifat rendah tahap dan boleh digabungkan. Berbeza dengan rangka kerja tradisional seperti Bootstrap atau Foundation yang menyediakan komponen siap bina (seperti butang, kad),Tailwind CSS Biarkan anda “membina” reka bentuk anda dengan secara langsung mengaplikasikan kelas-kelas yang bergranulariti tinggi ini dalam HTML.

Falsafah terasnya adalah “Kegunaan Diutamakan”. Ini bermakna, anda tidak perlu lagi menulis kod CSS khusus untuk setiap elemen, mahupun berulang-alik antara fail HTML dan CSS. Sebagai contoh, untuk membuat butang dengan padding, latar belakang berwarna biru, dan teks berwarna putih, anda boleh menulisnya secara langsung:

<button class="px-4 py-2 bg-blue-500 text-white rounded-lg">
  点击我
</button>

Dalam contoh ini,px-4 和 py-2 Pada masing-masing arah (horizontal dan vertical), padding telah disetkan dengan berasingan.bg-blue-500 Warna latar belakang telah ditetapkan.text-white Warna teks telah ditetapkan.rounded-lg Terdapat penambahan sudut bulat yang besar. Kaedah ini telah meningkatkan kelajuan pembangunan dan kemudahan penyelenggaraan dengan ketara, kerana gaya reka bentuk (style) berpadu rapat dengan struktur HTML, dan nama kelas (class names) itu sendiri sangat mudah difahami.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai konsep-konsep teras Tailwind CSS: daripada kelas-kelas praktikal hingga reka bentuk responsif dalam dunia sebenar.。

Bagaimana untuk memulakan penggunaan Tailwind CSS

Mula menggunakan Tailwind CSS Terdapat pelbagai cara untuk berbuat demikian, dan yang paling biasa adalah melalui alat CLI (Command Line Interface) rasmi atau dengan mengintegrasikannya dengan alat pembinaan (build tools).

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 →

Mula dengan cepat menggunakan Tailwind CLI

Ini adalah cara yang paling langsung, terutamanya sesuai untuk pembelajaran dan pembangunan prototaip dengan cepat. Pertama sekali, anda perlu menginisialisasikan projek menggunakan npm atau yarn dan memasang perluhan yang diperlukan. Tailwind CSS。

npm install -D tailwindcss
npx tailwindcss init

Ini akan membuat fail konfigurasi. tailwind.config.jsSeterusnya, buat sebuah fail CSS (seperti…) src/input.css), dan tambahkan arahan Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Kemudian, gunakan arahan CLI untuk mendengar (mengawasi) perubahan pada fail CSS tersebut, dan mengkompilasikan hasilnya menjadi kod CSS yang akhir.

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

Akhir sekali, masukkan kod yang dihasilkan ke dalam fail HTML anda. output.css Setelah fail tersebut disimpan, anda boleh mula menggunakan kelas-kelas praktikal yang disediakan oleh Tailwind.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Tailwind CSS sepenuhnya: Panduan praktikal untuk membina laman web responsif moden.。

Integrasi dengan rangka kerja front-end

Tailwind CSS Pengintegrasian dengan rangka kerja frontend moden sangat lancar. Sebagai contoh, dalam projek Vue atau React, anda boleh mengintegrasikannya menggunakan PostCSS. Apabila menggunakan Create React App, anda boleh memasangnya dengan mudah.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Ini akan dihasilkan pada masa yang sama. tailwind.config.js 和 postcss.config.js Fail konfigurasi. Kemudian, dalam fail CSS utama projek (seperti… src/index.cssTambahkan ketiga-tiga baris tersebut ke dalam (…) @tailwind Cukup berikan arahan sahaja.

Konsep Utama dan Kelas-Kelas Praktikal

Untuk menggunakan dengan cekap… Tailwind CSSKita mesti memahami sistem penamaan kelas yang praktikal dan prinsip reka bentuk responsif yang menjadi teras kepada konsep tersebut.

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.

Sistem Penamaan Kelas Praktikal

Tailwind CSS Nama kelas mengikuti corak penamaan yang konsisten, biasanya “atribut-modifier-nilai”. Sebagai contoh:
- 边距：m-4(Semua margin)mt-2(Margin atas)
- Warna:text-gray-800，bg-red-300
- Saiz:w-64(Lebar: 16rem)h-screen(Ketinggian: 100vh)
- Susun atur:flex，justify-center，items-center

Nombor biasanya berkaitan dengan satu sistem reka bentuk (jarakan antara elemen, saiz fon, dll.) dan secara lalunya berdasarkan unit asas 4px. Pada masa yang sama, sistem ini juga menyokong variasi keadaan (state variations), seperti apabila elemen tersebut ditekan (hovered).hover:bg-blue-700）、fokus (focus)focus:ring-2Dan sebagainya, anda hanya perlu menambahkan prefiks keadaan di hadapan nama kelas.

Membina reka bentuk yang responsif

Tailwind CSS Gunakan strategi responsif 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 menggunakan prefiks responsif. Sistem titik pemutusan (breakpoint) yang disediakan termasuk… sm, md, lg, xl, 2xl。

Diperoleh daripada WEB\nDisyorkan untuk membaca. Dari pemula hingga mahir: Menguasai Tailwind CSS untuk membina laman web responsif moden.。

Sebagai contoh, jika sebuah elemen mempunyai lebar penuh pada telefon bimbit, lebarnya berkurang kepada separuh pada skrin sederhana, dan menjadi satu perempat pada skrin besar, ia boleh ditulis seperti ini:

<div class="w-full md:w-1/2 lg:w-1/4">
  <!-- 内容 -->
</div>

Ini menjadikan pembinaan antara muka responsif yang kompleks sangat mudah dan intuitif, kerana semua peraturan responsif terkumpul pada satu elemen sahaja, menjadikannya mudah untuk difahami.

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

Pengalaman Praktikal: Membina Bar navigasi yang responsif

Mari kita gunakan sebuah contoh yang lengkap untuk membina sebuah bar navigasi yang moden dan responsif, dengan menggunakan pengetahuan yang telah kita pelajari.

Struktur HTML dan Gaya untuk Peranti Mudah Alih

Pertama sekali, kita membina struktur asas. Pada peranti mudah alih, bar navigasi biasanya mengandungi logo jenama dan butang menu berbentuk hamburger.

<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">
      <!-- 品牌标识 -->
      <div class="flex-shrink-0">
        <span class="text-white text-xl font-bold">Situs web saya</span>
      </div>
      <!-- 移动端菜单按钮 -->
      <div class="md:hidden">
        <button id="menu-btn" class="text-gray-300 hover:text-white focus:outline-none">
          <!-- 汉堡图标 SVG -->
          <svg class="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 class="hidden md:block">
        <div class="ml-10 flex items-baseline space-x-4">
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-900">Laman utama</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Mengenai</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">perkhidmatan</a>
          <a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Hubungi</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端下拉菜单 -->
  <div id="mobile-menu" class="hidden md:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Laman utama</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Mengenai</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">perkhidmatan</a>
      <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Hubungi</a>
    </div>
  </div>
</nav>

Di sini, kita menggunakan… md:hidden 和 hidden md:block Ia digunakan untuk mengawal penampilan dan penyembunyian elemen-elemen yang berbeza pada peranti desktop dan peranti mudah alih.

Menambah interaktiviti dan konfigurasi yang boleh disesuaikan

Bar navigasi memerlukan JavaScript untuk mengawal pembukaan dan penutupan menu pada peranti mudah alih. Tambahkan skrip yang mudah berikut:

<script>
  const menuBtn = document.getElementById('menu-btn');
  const mobileMenu = document.getElementById('mobile-menu');
  menuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
  });
</script>

Selain itu, anda mungkin ingin mengubah warna tema. Ini boleh dilakukan dengan membuat perubahan pada tetapan yang berkaitan. tailwind.config.js Fail tersebut digunakan untuk melaksanakan fungsi tertentu. Sebagai contoh, untuk memperluas palet warna tema:

module.exports = {
  theme: {
    extend: {
      colors: {
        'primary': '#3B82F6', // 自定义主色调
        'secondary': '#10B981',
      }
    }
  },
  variants: {},
  plugins: [],
}

Selepas itu, anda boleh menggunakannya dalam nama kelas. bg-primary 和 text-secondary Ya. Melalui fail konfigurasi, anda boleh menyesuaikan semua parameter reka bentuk seperti jarak antara elemen, jenis font, dan titik pemutusan (breakpoints) dengan sepenuhnya, agar ia sesuai dengan sistem reka bentuk jenama anda.

RINGKASAN

Tailwind CSS Dengan menggunakan pendekatan yang praktikal dan berkeutamaan, ia telah mengubah sepenuhnya cara pembangun menulis kod CSS. Pendekatan ini membenarkan keputusan berkaitan gaya (style) dimasukkan terus ke dalam tag HTML, sehingga meningkatkan kecekapan pembangunan dan konsistensi reka bentuk. Dari permulaan yang mudah hingga pembinaan komponen responsif yang kompleks, sistem nama kelas yang intuitif dan keupayaan konfigurasi yang kuat menjadikannya sangat sesuai untuk kedua-dua reka bentuk prototaip yang cepat dan projek produksi yang besar. Memahami konsep asas seperti penamaan kelas yang praktikal, prefiks responsif, dan penyesuaian fail konfigurasi adalah kunci untuk membina laman web yang moden dan responsif.

FAQ - Soalan Lazim

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

Tidak akan. Dalam persekitaran produksi,Tailwind CSS PurgeCSS (atau enjin JIT yang terbina dalam) akan digunakan untuk memeriksa fail-fail template HTML, JavaScript, dan lain-lain, serta menghapuskan semua kelas CSS yang tidak digunakan secara automatik. Fail CSS yang dihasilkan akhirnya biasanya hanya berukuran beberapa KB, yang jauh lebih kecil berbanding dengan banyak rangka kerja tradisional.

Dalam projek pasukan, bagaimanakah untuk mengekalkan konsistensi gaya (style consistency)?

Tailwind CSS Ia sendiri menggalakkan konsistensi dengan menyediakan satu set sistem reka bentuk yang terhad (seperti warna yang tetap, nisbah jarak yang standard). Selain itu, pasukan dapat bersama-sama menyelenggara dan memperluas sistem reka bentuk yang seragam tersebut. tailwind.config.js Fail konfigurasi digunakan untuk menentukan warna, fon, titik pemotongan (breakpoints), dan lain-lain yang khusus untuk projek tersebut. Arahan @apply boleh digunakan dalam CSS untuk mengumpulkan kombinasi kelas yang sering digunakan menjadi kelas komponen yang khusus, yang seterusnya dapat meningkatkan konsistensi dalam reka bentuk antara elemen-elemen dalam projek.

Bagaimana untuk menutupi atau menyesuaikan gaya komponen?

Terdapat tiga cara utama. Pertama, menggunakan kelas praktikal yang lebih khusus terus dalam HTML, yang merupakan cara yang paling biasa. Kedua, memperluas atau menggantikan tetapan tema dalam fail konfigurasi. Ketiga, menggunakan dalam fail CSS. @apply Arahan tersebut menggabungkan beberapa kelas praktikal menjadi satu kelas yang baru, atau menulis kod CSS yang disesuaikan dan menggunakannya. @layer Arahan tersebut digunakan untuk menyuntikkannya ke dalam Tailwind. base、components 或 utilities Dalam lapisan tersebut, keutamaan dapat dikawal.

Tailwind CSS sesuai untuk digunakan dengan pustaka atau rangka kerja UI mana?

Tailwind CSS Ia dapat digabungkan dengan hampir semua rangka kerja front-end moden dengan sempurna, termasuk React, Vue, Angular, Svelte, dan lain-lain. Ia biasanya berfungsi sebagai alat gaya asas yang bekerjasama dengan sistem komponen rangka kerja tersebut. Selain itu, terdapat juga beberapa perpustakaan komponen UI yang dibina berdasarkan Tailwind, seperti Headless UI (komponen interaktif tanpa gaya rasmi), DaisyUI, Flowbite, dan lain-lain, yang menyediakan komponen siap pakai sambil membenarkan anda membuat penyesuaian yang mendalam menggunakan Tailwind.