Bermula dari kosong: Membina laman web responsif moden dengan cepat menggunakan Tailwind CSS.

Dalam beberapa tahun kebelakangan ini, bidang pembangunan front-end telah menyaksikan kebangkitan rangka kerja CSS yang mengutamakan kegunaan praktikal (Utility-First CSS frameworks). Tailwind CSS Tidak diragukan lagi, ia merupakan salah satu yang terbaik dalam kategorinya. Dengan menyediakan satu siri kelas yang berfungsi dengan terperinci dan boleh digabungkan bersama, ia telah mengubah sepenuhnya cara pembangun membina antara muka pengguna. Berbeza dengan rangka kerja CSS tradisional seperti Bootstrap,Tailwind CSS Tidak ada komponen siap sedia yang disediakan, sebaliknya alat asas untuk membina komponen-komponen tersebut disediakan. Perubahan paradigma ini membolehkan proses pembangunan berjalan lebih cepat, dengan tahap penyesuaian yang lebih tinggi, dan juga memudahkan pelaksanaan reka bentuk yang benar-benar responsif (responsive design).

Artikel ini akan membimbing anda dari awal untuk belajar bagaimana menggunakan… Tailwind CSS Kekuatan ciri-ciri tersebut membolehkan pembinaan laman web responsif yang memenuhi standard moden dengan cekap. Kami akan meliputi keseluruhan proses, daripada persiapan persekitaran pembangunan hingga penggunaan sebenar laman web tersebut.

Konsep asas dan kelebihan Tailwind CSS

Sebelum mempelajari dengan lebih mendalam, adalah penting untuk memahami terlebih dahulu konsep-konsep asas dan prinsip-prinsip yang berkaitan. Tailwind CSS Falsafah reka bentuk ini sangat penting. Intinya adalah “Kegunaan Diutamakan” (Utility-First), yang bermakna gaya dibina dengan mengaplikasikan banyak kelas kecil yang mempunyai satu tujuan sahaja secara langsung dalam HTML.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Tailwind CSS: Dari alat atom hingga panduan praktikal untuk pembangunan web responsif yang berkesan.。

Prinsip Prioriti Kepraktisan

Cara penulisan CSS tradisional memerlukan anda untuk mencipta nama kelas yang bermakna (semantic class names) untuk setiap komponen. .btn-primaryKemudian, definisikan gaya untuk kelas-kelas ini dalam fail CSS yang berasingan. Tailwind CSS Oleh itu, saya menggalakkan anda untuk menggunakan terus alat atau kaedah yang sesuai, seperti… bg-blue-500 text-white font-bold py-2 px-4 rounded Kombinasi kelas seperti ini digunakan untuk membina butang. Kaedah ini menghilangkan beban kerja yang berkaitan dengan peralihan berulang-ulang antara fail HTML dan CSS, kerana semua gaya disajikan secara intuitif dalam kod markup tersebut.

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 →

Ketelusan yang tinggi dalam penyesuaian

Tailwind CSS Semua gaya tersebut dikawal melalui satu sistem yang dinamakan… tailwind.config.js Konfigurasi fail tersebut digunakan untuk menggerakkan aplikasi. Dalam fail ini, anda boleh dengan mudah mendefinisikan sistem reka bentuk projek anda: termasuk palet warna, jenis font, nisbah jarak antara elemen, titik pemutusan (breakpoints) untuk reka bentuk responsif, dan sebagainya. Ini bermakna anda boleh menyesuaikan gaya aplikasi sepenuhnya mengikut reka bentuk asal, tanpa terhad oleh tema lalai yang disediakan oleh rangka kerja tersebut.

Sokongan terbina untuk reka bentuk responsif

Reka bentuk responsif adalah Tailwind CSS Kelebihannya terletak pada sistem titik henti (breakpoint) yang mengutamakan penggunaan peranti mudah alih. Sistem ini menyediakan lima prefiks titik henti secara lalai:sm:, md:, lg:, xl:, 2xl:Anda hanya perlu menambahkan prefiks ini di hadapan kelas-kelas praktikal, dan dengan mudah anda dapat menentukan gaya yang sesuai untuk pelbagai saiz skrin.

<!-- 默认在移动端显示为块级元素，在中等屏幕及以上尺寸显示为行内块元素 -->
<div class="block md:inline-block">Responsive Elements</div>

Penginisian projek dan konfigurasi persekitaran

Mula menggunakan Tailwind CSS Terdapat pelbagai cara untuk melakukannya, termasuk melalui CDN, menggunakan alat CLI (Command Line Interface), atau mengintegrasikannya dengan alat pembinaan frontend. Untuk mendapatkan pengalaman terbaik (seperti mod JIT, Tree Shaking, dan lain-lain), kami mengesyorkan penggunaan alat baris perintahnya atau pengintegrasian dengan PostCSS.

Menggunakan Tailwind CLI untuk memulakan projek dengan cepat

Inilah cara yang paling cepat untuk memulakan. Pertama sekali, pastikan bahawa Node.js telah dipasang pada sistem anda. Kemudian, jalankan arahan berikut dalam direktori projek:

Diperoleh daripada WEB\nDisyorkan untuk membaca. Mulakan dari awal: Bina antaramuka web responsif moden menggunakan Tailwind CSS.。

# 初始化 package.json 文件（如果不存在）
npm init -y

# 安装 Tailwind CSS
npm install -D tailwindcss

# 生成 tailwind.config.js 配置文件
npx tailwindcss init

Seterusnya, buat sebuah fail masuk untuk CSS, sebagai contoh… src/input.cssDan tambahkan… Tailwind CSS Arahan:

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

Kemudian, jalankan arahan CLI untuk membina kod CSS anda:

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

Arahan ini akan melakukan pemantauan (listening). src/input.css Perubahan pada fail tersebut akan dikesan, dan kod CSS yang telah dikompilasi akan dihasilkan serta-merta dan dihantar ke… dist/output.cssAkhir sekali, masukkan kod berikut ke dalam fail HTML anda: ./dist/output.css Itu sahaja.

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.

Pengintegrasian dengan alat pembinaan (menggunakan Vite sebagai contoh)

Jika anda menggunakan alat pembinaan frontend yang moden seperti Vite, proses integrasi menjadi lebih lancar. Selepas membuat projek Vite, anda perlu memasang dan mengkonfigurasikannya. Tailwind CSS：

# 创建 Vite 项目
npm create vite@latest my-project -- --template vanilla
cd my-project

# 安装 Tailwind CSS 及其依赖
npm install -D tailwindcss postcss autoprefixer

# 初始化配置文件
npx tailwindcss init -p

Ini akan menjana… tailwind.config.js 和 postcss.config.js Dua fail. Kemudian, ubah suai mereka. tailwind.config.js Path ke fail dan kandungan konfigurasi:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./*.html", "./src/**/*.{js,ts}"], // 根据你的项目结构调整
  theme: {
    extend: {},
  },
  plugins: [],
}

Kemudian, dalam fail CSS utama anda (seperti…) src/style.cssDiperkenalkan dalam Tailwind CSS Arahan tersebut telah dijalankan. Sekarang, ia sedang beroperasi. npm run devDengan itu, anda boleh menggunakannya dalam projek anda. Tailwind CSS Baiklah.

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

Membina komponen responsif menggunakan Tailwind CSS

Setelah memahami konfigurasi persekitaran, mari kita bina beberapa komponen responsif yang biasa digunakan untuk merasai secara langsung proses kerjanya.

Membina sebuah bar navigasi

Sebuah bar navigasi yang responsif biasanya disusun secara horizontal pada peranti desktop, dan akan berubah menjadi menu hamburger pada peranti mudah alih. Tailwind CSS Ia boleh dilakukan dengan mudah.

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 p-4">
  <div class="container mx-auto flex flex-wrap items-center justify-between">
    <!-- 品牌Logo -->
    <a href="#" class="text-white text-xl font-bold">My Brand</a>

<!-- 汉堡菜单按钮（移动端显示） -->
    <button class="md:hidden text-white focus:outline-none" id="menu-button">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>

<!-- 导航链接 -->
    <div class="hidden w-full md:flex md:w-auto md:items-center" id="menu">
      <ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0">
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">Laman utama</a></li>
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">Mengenai</a></li>
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">perkhidmatan</a></li>
        <li><a href="#" class="block py-2 text-gray-300 hover:text-white">Hubungi</a></li>
      </ul>
    </div>
  </div>
</nav>

<script>
  // 简单的 JavaScript 用于切换移动端菜单
  document.getElementById('menu-button').addEventListener('click', function() {
    const menu = document.getElementById('menu');
    menu.classList.toggle('hidden');
  });
</script>

Dalam contoh ini,md:hidden 和 md:flex Kawalan kelas yang serupa mengawal penampilan dan penyembunyian elemen pada titik pemotongan (breakpoints) yang berbeza.flex-col 和 md:flex-row Kawalan telah dibuat terhadap arah susun atur (layout direction).

Membina komponen kad

Kad (card) merupakan komponen biasa yang digunakan untuk menampilkan kandungan pada halaman web. Berikut adalah contoh kad yang mempunyai efek “hover” (apabila kursor mouse diletakkan di atasnya) dan gambar yang bersifat responsif (berubah saiz mengikut peranti yang digunakan):

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white mx-auto my-8">
  <!-- 响应式图片容器 -->
  <div class="w-full h-48 md:h-64 overflow-hidden">
    <img class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
         src="https://picsum.photos/400/300"
         alt="Gambar kad">
  </div>
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800">Tajuk Kad</div>
    <p class="text-gray-700 text-base">
      Ini adalah sebuah deskripsi tentang kad tersebut. Pada peranti mudah alih dan desktop, susun atur serta saiz fonnya boleh menyesuaikan diri secara automatik.
    </p>
  </div>
  <div class="px-6 pt-4 pb-6">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Tag #1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">Tag #2</span>
  </div>
</div>

Di sini telah digunakan… h-48 md:h-64 Untuk membolehkan ketinggian gambar berubah mengikut saiz skrin yang berbeza,hover:scale-105 和 transition-transform Efek pengembangan imej ketika diletakkan di atasnya (hover effect) telah dilaksanakan dengan lancar.

Teknik Tinggi dan Pengoptimuman Pengeluaran

Apabila projek semakin berkembang, menguasai beberapa teknik lanjutan dan strategi pengoptimuman dapat membantu anda menggunakan sumber dengan lebih cekap. Tailwind CSS。

Gunakan @apply untuk mengekstrak kelas yang berulang.

Walaupun prinsip “kegunaan yang utama” (practicality first) merupakan konsep asas, apabila sebuah kelas digunakan berulang kali dalam projek (contohnya, butang dengan reka bentuk tertentu), ia masih boleh digunakan. @apply Arahan tersebut memerlukan kandungan tersebut diekstrak ke dalam sebuah kelas CSS yang dibuat khas, agar kod HTML kekal ringkas.

Dalam fail CSS anda (seperti…) input.cssTambahkan dalam:

.btn-primary {
  @apply bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-150 ease-in-out;
}

Kemudian, gunakan dalam HTML secara langsung. class="btn-primary" Itu sahaja.

Pengaturan khusus yang mendalam untuk fail konfigurasi

Buka tailwind.config.jsAnda boleh membuat penyesuaian secara menyeluruh. Sebagai contoh, anda boleh memperluas pilihan warna tema:

module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
        'brand-green': '#0ca678',
      },
      spacing: {
        '128': '32rem',
      }
    },
  },
  plugins: [],
}

Setelah ia didefinisikan, anda boleh menggunakannya seperti biasa. bg-brand-blue 和 w-128 Inilah kelas baru tersebut.

Mengaktifkan mod JIT (Just-In-Time) dan pembinaan untuk pengeluaran (production build)

Mulai versi 3.0,Tailwind CSS Enjin Just-In-Time (JIT) disediakan secara lalai. Ia akan menjana gaya secara dinamik ketika anda menulis templat, yang dengan ketara meningkatkan kelajuan pembangunan dan mengurangkan saiz fail CSS akhir. Untuk persekitaran produksi, pastikan untuk mengaturnya dalam arahan pembinaan (build command). NODE_ENV=production，Tailwind CSS Proses “Tree Shaking” akan dilakukan secara automatik, di mana semua gaya yang tidak digunakan akan dikeluarkan.

Konfigurasi skrip dalam fail `package.json`:

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch",
    "build": "NODE_ENV=production tailwindcss -i ./src/input.css -o ./dist/output.css --minify"
  }
}

Run npm run build Anda akan mendapat sebuah fail CSS yang telah dikompres dan dioptimumkan.

RINGKASAN

Tailwind CSS Dengan menggunakan metodologi yang berpusatkan keutamaan, ia menyediakan penyelesaian gaya yang cekap, fleksibel dan mudah diselenggara untuk pembangun front-end. Ia menghilangkan kaedah tradisional yang memerlukan pertukaran antara berbagai-bagai fail, dan mengintegrasikan keputusan gaya terus ke dalam proses penulisan HTML, seterusnya mempercepatkan proses pembangunan. Alat responsif yang kuat dan sistem konfigurasi yang boleh disesuaikan dengan mendalam membolehkan penggunaan penyelesaian ini untuk pelbagai aplikasi, daripada laman web peribadi yang ringkas hingga aplikasi perusahaan yang kompleks.

Walaupun pada mulanya perlu menghafal beberapa nama kelas, namun setelah biasa dengannya, peningkatan kecekapan pembangunan adalah ketara. Dengan gabungan enjin JIT (Just-In-Time) dan pengoptimuman produksi yang cemerlang,Tailwind CSS Tidak diragukan lagi, ia merupakan alat yang sangat kuat untuk membina laman web yang moden dan responsif.

FAQ - Soalan Lazim

Adakah penggunaan Tailwind CSS akan menyebabkan kod HTML kelihatan terlalu rumit atau “bengkak” (tidak ringkas)?

Ini memang merupakan kebimbangan yang sering dialami. Pada mulanya, melihat banyak nama kelas dalam HTML mungkin kelihatan kacau. Namun, “kegemukan” ini sebenarnya membawa fleksibiliti dan kelajuan pembangunan yang luar biasa. Anda tidak perlu lagi memikirkan dengan teliti nama kelas, dan tidak perlu menyelenggara fail CSS yang besar yang mungkin mengandungi banyak gaya yang tidak berguna. Selain itu, anda boleh menggunakan… @apply Arahan tersebut menyatakan agar kelas-kelas praktikal yang sering digunakan digabungkan menjadi kelas komponen, bertujuan untuk menjaga kekemasan template.

Bagaimana untuk menutupi atau mengubah suai gaya lalai Tailwind?

Tailwind CSS Reka bentuknya sendiri menggalakkan penggunaan pelbagai penyesuaian dan kustomisasi. Cara utama untuk melakukan ini adalah melalui pengubahsuaian. tailwind.config.js Fail konfigurasi. Anda boleh... theme.extend Anda boleh menambahkan nilai baru untuk memperluas tema lalai, atau juga boleh… theme Nilai kunci yang baru akan menimpa nilai lama dan menggantikan nilai lalai. Untuk mengatasi gaya (style) secara sekali gus, anda boleh menggunakan notasi kurungan siku untuk menghasilkan sebarang nilai yang diinginkan, sebagai contoh: top-[117px] 或 bg-[#1da1f2]。

Tailwind CSS sesuai untuk digunakan bersama dengan pelbagai rangka kerja front-end (front-end frameworks). Beberapa contoh termasuk:

Tailwind CSS Ia boleh disintegrasikan dengan hampir semua rangka kerja dan perpustakaan front-end utama dengan sempurna. Sama ada rangka kerja komponen seperti React, Vue, Angular, Svelte, atau rangka kerja meta seperti Next.js, Nuxt.js, Gatsby, pihak pengembang telah menyediakan panduan integrasi yang terperinci. Reka bentuk berdasarkan kelas (class-based design) Tailwind sangat sesuai dengan konsep komponenasi yang digunakan oleh rangka kerja-rangka kerja ini, membolehkan anda menggunakan kelas Tailwind secara langsung dalam JSX, template Vue, dan lain-lain.

Dalam persekitaran produksi, adakah saiz fail CSS akhir akan menjadi sangat besar?

Tidak, ini adalah apa yang sepatutnya berlaku. Tailwind CSS Salah satu kelebihannya adalah penggunaan enjin JIT (Just-In-Time Compilation) dan fungsi PurgeCSS yang canggih (terbina dalam Tailwind CSS v3+). Fungsi ini akan menganalisis fail-fail projek anda (HTML, JSX, komponen Vue, dll.) semasa proses pembinaan versi produksi, dan hanya menyertakan kelas CSS yang benar-benar digunakan dalam fail gaya akhir. Hasilnya, fail CSS yang dihasilkan sangat kecil (biasanya hanya beberapa KB) dan telah dioptimumkan dengan baik.