Panduan Permulaan untuk Membina Laman Web Responsif Moden Menggunakan Framework CSS Tailwind

Cara penulisan CSS tradisional memerlukan pembangun untuk mencipta kelas gaya yang berasingan untuk setiap elemen atau menulis peraturan CSS yang panjang dan berulang, yang sering menyebabkan fail gaya menjadi besar dan sukar untuk diurus. Tailwind CSS Menggunakan konsep “Utility-First” yang sangat berbeza. Konsep ini mengasingkan setiap atribut gaya yang bersifat individu dan asas (seperti warna, margin, saiz font) ke dalam kelas alat yang berasingan. Pembangun boleh mengakses dan mengatur atribut-atribut tersebut secara langsung pada elemen HTML. class Dalam atribut-atribut tersebut, kelas-kelas alat ini digabungkan untuk membina antara muka pengguna, yang memastikan integrasi yang erat antara gaya dan struktur. Kaedah ini membolehkan pengembangan yang lebih cepat, reka bentuk visual yang konsisten, serta mengurangkan risiko penggunaan gaya yang tidak perlu (bahagian CSS yang tidak digunakan).

Pasang Tailwind CSS Cara penggunaannya sangat fleksibel, dan boleh diintegrasikan ke dalam pelbagai rangkaian alat pembinaan antara muka (front-end build tools). Cara yang paling disyorkan adalah dengan memasangnya menggunakan pengurus paket Node.js (seperti npm atau yarn), dan bekerjasama dengan PostCSS untuk pemprosesan.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Arahan penginisian akan menjana satu fail yang bernama… tailwind.config.js Ini adalah fail konfigurasi utama untuk sistem tersebut. Dalam fail ini, anda boleh melakukan penyesuaian tema, menambah gaya yang dibuat khas, dan mengkonfigurasi sumber kandungan projek (iaitu memberitahu sistem di mana kandungan tersebut harus diambil). Tailwind File-fail mana yang perlu discan untuk melakukan optimisasi semasa proses pembinaan produksi?

Diperoleh daripada WEB\nDisyorkan untuk membaca. Penguraian Mendalam: Bagaimana Menguasai Tailwind CSS dengan Cekap untuk Membina Antaramuka Responsif yang Moden。

Seterusnya, anda perlu membuat perubahan dalam fail masuk CSS untuk projek tersebut (contohnya, src/input.css）Pengenalan Tailwind Instruksi 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 →

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

Kemudian, konfigurasikan rangkaian alat pembinaan anda (seperti Vite, Webpack) untuk menggunakan PostCSS untuk memproses fail CSS.Tailwind Penyambung PostCSS akan menggantikan arahan-arahan ini secara automatik dengan semua kelas alat yang dihasilkan.

Akhirnya, jalankan arahan pembinaan untuk menghasilkan fail CSS yang akhir. Dalam persekitaran pembangunan, anda juga boleh menggunakan… npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Perintah untuk memulakan proses pemantauan, yang membolehkan penggantian kod secara dinamik (hot reloading).

Kelas-kelas praktikal teras dan reka bentuk responsif.

Tailwind CSS Inti dari sistem ini adalah sistem kelas alat yang besar dan direka dengan teliti. Kelas-kelas ini mengikuti konvensyen penamaan yang seragam, menjadikannya sangat mudah untuk diingat dan digunakan. Sebagai contoh,p-4 Menunjukkan bahawa jarak antara elemen (padding) adalah 1rem.text-blue-600 Menunjukkan warna teks sebagai biru yang khusus.font-bold Menunjukkan bahawa fon tersebut digunakan dalam bentuk tebal (bold).

Reka bentuk responsif adalah Tailwind Satu lagi ciri kuatnya adalah penggunaan strategi “mobile-first” (mengutamakan penggunaan peranti mudah alih). Ini bermakna, tiada kelas alat (tool classes) yang mempunyai prefiks tertentu… text-smIa berkesan untuk semua saiz skrin. Kemudian, anda boleh menentukan gaya yang berbeza untuk skrin yang lebih besar dengan menambahkan prefiks responsif. Prefiks ini berdasarkan satu set titik pemutusan yang boleh disesuaikan (secara lalai)... sm, md, lg, xl, 2xl）。

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Ultimatif Tailwind CSS: Dari Pemula hingga Pakar dalam Kerangka Kerja CSS Moden。

<div class="text-sm md:text-base lg:text-lg">
  <!-- 在小屏幕上字体大小为 small，中等屏幕为 base，大屏幕为 large -->
  Saiz teks dalam bahagian ini akan berubah mengikut saiz skrin.
</div>

Dengan cara ini, membina reka bentuk yang boleh menyesuaikan diri (adaptive layout) menjadi sangat mudah:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/3 p-4">Kandungan panel sisi</div>
  <div class="w-full md:w-2/3 p-4">Kawasan Kandungan Utama</div>
</div>

Pengaturan yang disesuaikan dan diperluas

Walaupun Tailwind Sistem reka bentuk lalai yang sedia untuk digunakan telah disediakan, namun ia direka dengan pertimbangan untuk penyesuaian yang mendalam sejak awal. Kebanyakan nilai lalai boleh diubah suai. tailwind.config.js Fail tersebut digunakan untuk melakukan pengembangan (extension) atau penggantian (overwriting) kandungan.

Tema yang Dibuat Sendiri: Anda boleh mengaturnya dalam fail konfigurasi. theme.extend Beberapa nilai baru boleh ditambahkan tanpa mempengaruhi tema lalai. Sebagai contoh, warna khusus atau skala jarak yang diperluas boleh ditambahkan.

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.

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

Konfigurasi sumber kandungan: Untuk menghilangkan gaya yang tidak digunakan semasa pembinaan produksi.Tailwind Perlu mengetahui fail-fail mana yang mengandungi maklumat tersebut. Tailwind Kelas. Ini dilakukan melalui fail konfigurasi. content Field specification.

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,vue,jsx,tsx}'],
  // ... 其他配置
}

Gunakan tanda kurung siku untuk menentukan nilai yang boleh berubah-ubah: Apabila reka bentuk perlu menetapkan nilai yang tepat hingga piksel, anda tidak perlu mengdefinisikannya dalam fail konfigurasi setiap kali. Anda boleh menggunakan sintaks tanda kurung siku untuk memasukkan nilai yang diinginkan, seperti berikut:top-[117px] 或 bg-[#bada55]Ini memberikan fleksibiliti yang sangat besar untuk melaksanakan reka bentuk dengan cepat.

Menggabungkan komponen dengan ekosistem komuniti

Walaupun penggunaan kod untuk kelas alat (tool classes) yang ditulis terus dalam HTML dianggap baik, dalam projek yang sebenar dan boleh diselenggara, adalah penting untuk mengelakkan pengulangan kod sepenuhnya.Tailwind Galakkan penggunaan rangka kerja yang berdasarkan komponen (seperti React, Vue, Svelte) untuk mengekstrak dan mengulangi kombinasi gaya yang sering digunakan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Tailwind CSS: Panduan Praktikal dan Amalan Terbaik untuk Pembangunan Antaramuka Pengguna (UI) yang Moden dan Cekap。

// React 组件示例
function Button({ children, variant = 'primary' }) {
  const baseClasses = "px-4 py-2 rounded font-semibold transition duration-200";
  const variants = {
    primary: "bg-blue-600 hover:bg-blue-700 text-white",
    secondary: "bg-gray-200 hover:bg-gray-300 text-gray-800",
  };
  return (
    <button className={`${baseClasses} ${variants[variant]}`}>
      {children}
    </button>
  );
}

Selain itu,Tailwind Ia memiliki ekosistem komuniti yang sangat kaya, yang merangkumi pelbagai plugin rasmi dan pihak ketiga, yang digunakan untuk menambahkan variasi alat baru (seperti pertanyaan kontena, gaya cetak) atau perpustakaan komponen terintegrasi (seperti Headless UI, Daisy UI). Untuk gaya kustom yang lebih kompleks, anda juga boleh menggunakannya dalam CSS. @apply Arahan tersebut mencadangkan agar kelas-kelas yang berkaitan dengan alat (tools) dikeluarkan ke dalam sebuah kelas CSS yang dibuat khas, namun penggunaannya hanya disyorkan dalam keadaan yang perlu sahaja.

.btn-custom {
  @apply px-4 py-2 font-bold rounded;
  background-color: theme(colors.brand-blue);
}

RINGKASAN

Tailwind CSS Ia bukan sekadar sebuah rangka kerja CSS, tetapi juga mewakili sebuah metodologi pembangunan gaya antara muka (frontend) yang moden, cekap, dan mudah diselenggara. Dengan sistem kelas yang praktikal, pembangun dapat melaksanakan reka bentuk yang kompleks dengan kelajuan yang belum pernah terjadi sebelumnya, sambil memastikan tingkah laku yang responsif dan konsistensi reka bentuk. Keupayaan untuk disesuaikan secara mendalam memastikan ia dapat menyesuaikan diri dengan pelbagai senario, daripada projek kecil hingga aplikasi perusahaan yang besar. Walaupun pada mulanya perlu menghafal beberapa konvensyen penamaan kelas, namun setelah biasa dengannya, ia akan meningkatkan dengan ketara kecekapan dan keseronokan dalam pembangunan antara muka, menjadikannya komponen yang tidak terpisahkan dalam rangkaian alat pembangun web moden.

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

Mengapa analogi alat (tools) lebih baik daripada CSS tradisional?

Kelebihan alat kelas (class tools) terletak pada pengurangan kos peralihan antara konteks yang berbeza. Pembangun tidak perlu berulang-alik antara fail HTML dan CSS, tidak perlu bimbang tentang pemilihan nama kelas, dan dapat melihat semua deklarasi gaya pada elemen dengan mudah. Alat ini memastikan konsistensi dengan mengawal penggunaan tag reka bentuk yang telah ditentukan sebelumnya, dan secara semulajadi mengelakkan masalah pengembangan kod yang tidak perlu, kerana alat pembinaan (build tools) akan mengoptimumkan kod secara automatik.

Adakah kelas-kelas alat (utility classes) menyebabkan kod HTML menjadi berlebihan (bengkak/berat)?

Ini memang merupakan kebimbangan yang biasa. Sebenarnya, walaupun untuk elemen individu… class Atribut mungkin menjadi sangat panjang, tetapi ini hanyalah proses pemindahan maklumat gaya dari fail CSS ke dalam fail HTML/JSX. Dari segi jumlah kod keseluruhan dan kemudahan penyelenggaraan, keadaan “bergelambir” ini seringkali adalah berbaloi, kerana ia meningkatkan kekhususan fungsi dan menjadikan skop penggunaan atribut lebih jelas. Untuk kombinasi gaya yang biasa digunakan, amalan terbaik adalah dengan mengenkapsulasikannya menggunakan komponen-komponen dalam rangka kerja front-end, bukannya menulis nama kelas yang panjang berulang kali.

Bagaimana untuk mengoptimumkan saiz fail CSS dalam projek Tailwind di persekitaran produksi?

Tailwind Versi produksi tersebut telah mencapai pengoptimuman yang maksimum melalui teknologi PurgeCSS (kini dikenali sebagai “Content Scanning”). Anda hanya perlu… tailwind.config.js Konfigurasi dengan betul dalam bahasa Cina (disederhanakan) content Field, yang merujuk kepada semua yang mengandungi… Tailwind Fail templat kelas tersebut membolehkan alat pembinaan (build tool) untuk mengekstrak hanya kelas-kelas yang benar-benar digunakan dalam projek anda semasa menghasilkan kod CSS yang akan digunakan dalam aplikasi sebenar. Fail CSS yang dihasilkan biasanya berukuran antara beberapa kilobait hingga belasan kilobait sahaja, yang jauh lebih kecil berbanding dengan kod CSS yang dihasilkan oleh kaedah tradisional atau kebanyakan rangka kerja antara muka pengguna (UI framework).

Bagaimanakah Tailwind CSS berbanding dengan rangka kerja seperti Bootstrap?

Bootstrap Sebuah set komponen yang lengkap dan telah direka dengan reka bentuk luaran yang tertentu disediakan (seperti bar navigasi, kad, kotak modal), di mana pembangun boleh terus menggunakan struktur HTML ini dan menyesuaikan tema melalui penggunaan variabel. Tailwind CSS Ia tidak menyediakan sebarang komponen siap yang mempunyai reka bentuk yang tetap; sebaliknya, ia menawarkan satu set “bahan mentah” (kelas alat) yang lebih asas yang boleh digunakan untuk membina komponen khusus yang diinginkan.Tailwind Ia menyediakan kebebasan reka bentuk yang tidak terhad dan saiz fail CSS yang lebih kecil, namun anda perlu membina komponen UI dari awal.Bootstrap Ia akan membolehkan anda membina prototaip yang kelihatan profesional dengan lebih cepat, namun mempunyai gaya yang agak tetap (tidak berubah-ubah).