Apa itu Tailwind CSS?

Core Concept: Functionality First

Dalam pembangunan laman web tradisional, penulisan CSS sering dipisahkan daripada struktur HTML. Pembangun perlu mencipta nama kelas yang bermakna (semantic class names) untuk elemen-elemen tersebut. <code>.header</code>、<code>.card-body</code>Kemudian, anda menulis peraturan gaya yang khusus untuk kelas-kelas ini dalam fail gaya (style sheet). Pendekatan ini menimbulkan masalah seperti kesulitan dalam penamaan, konflik gaya, dan perubahan konteks (context switching).Tailwind CSSSebuah falsafah yang sama sekali berbeza, iaitu “Utility-First” (Fungsi Terlebih Dahulu), telah dicadangkan. Falsafah ini tidak menyediakan sebarang komponen UI siap sedia dengan reka bentuk tertentu (seperti butang atau kad), sebaliknya menawarkan sebuah perpustakaan besar kelas CSS yang bersifat atomik (terdiri daripada komponen yang berfungsi secara berasingan) dan mempunyai tanggungjawab yang jelas.

Fungsi-fungsi ini dipetakan terus ke dalam atribut CSS. Sebagai contoh, untuk menetapkan margin atas, anda boleh menggunakan… <code>.mt-4</code>(Sila tambahkan teks yang perlu diterjemahkan ke dalam bahasa Melayu.) margin-top: 1rem;Untuk menetapkan warna latar belakang, anda boleh menggunakan… <code>.bg-blue-500</code>Untuk mengatur susunan elemen menggunakan reka bentuk fleksibel (flex layout), anda boleh menggunakan properti CSS `display: flex;`. <code>.flex</code>Pembangun melakukan ini dengan mengubah sifat (attribute) elemen HTML tertentu.classDalam atribut, kelas fungsi yang berstruktur dengan terperinci ini boleh digabungkan untuk membina sebarang reka bentuk visual yang disesuaikan dari awal, sama seperti membina blok bangunan. Kelebihan kaedah ini adalah gaya (style) disertakan terus pada elemen tersebut, menjadikan sumber dan kesan gaya itu mudah difahami. Ini secara langsung menghilangkan isu berkaitan “specificity” (kekhususan gaya), dan dengan itu mempercepatkan proses pembangunan prototaip serta pengulangan reka bentuk.

Ciri-ciri Utama dan Prinsip Kerja

Sistem nama kelas atomisasi yang lengkap

Tailwind CSSInti dari sistem ini adalah sebuah sistem kelas fungsional yang direka dengan teliti, yang meliputi hampir semua atribut CSS yang biasa digunakan. Sistem ini adalah lengkap dan konsisten, merangkumi aspek-aspek seperti susun atur (Flexbox, Grid), jarak antara elemen (Margin, Padding), pemformatan teks (font, row height), warna (teks, latar belakang, border), efek visual (effects), dan lain-lain. Setiap kelas hanya melakukan satu fungsi sahaja, dan penamaannya mengikuti satu set peraturan yang mudah difahami. Sebagai contoh,<code>.p-6</code>\nMenunjukkan padding: 1.5rem;，<code>.text-center</code>\nMenunjukkan text-align: center;，<code>.rounded-lg</code>\nMenunjukkan border-radius: 0.5rem;Metode atomisasi ini membolehkan gaya (styles) digabungkan dengan mudah dan dengan hasil yang boleh diramalkan.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai sepenuhnya Tailwind CSS: Panduan Kerangka CSS Moden Dari Asas Hingga Penggunaan Praktikal。

Kerentanan yang tinggi untuk disesuaikan berdasarkan konfigurasi

WalaupunTailwind CSS Sistem reka bentuk lalai yang sedia untuk digunakan telah disediakan, tetapi kekuatan sebenarnya terletak pada keboleh disesuaikan yang tiada tandingannya. Semua nilai lalai – termasuk warna, nisbah jarak, fon, titik pemutusan, bayangan, dan animasi – boleh diubah melalui alat yang dinamakan… <code>tailwind.config.js</code> Anda boleh menimpa dan memperluas fail konfigurasi JavaScript 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 →

Sebagai contoh, anda boleh mendefinisikan warna jenama anda dalam fail konfigurasi, dan kemudian warna latar belakang, warna teks, warna garis, dan pelbagai fungsi lain yang berkaitan akan dihasilkan secara automatik.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#1a73e8',
      },
      spacing: {
        '128': '32rem',
      }
    }
  }
}

Setelah konfigurasi selesai, anda boleh menggunakannya terus. <code>.bg-brand-primary</code> 和 <code>.h-128</code> Kelas seperti ini memastikan bahawa gaya projek selaras sepenuhnya dengan spesifikasi reka bentuk, dan memudahkan pembinaan serta penyelenggaraan satu set bahasa reka bentuk yang seragam.

Engine for Real-Time Production Mode

Dari segi pembinaan produksi (production building),Tailwind CSS Ciri-ciri revolusionernya adalah enjin Just-In-Time (JIT) yang digunakan. Dalam mod tradisional, rangka kerja (framework) akan menghasilkan fail CSS yang besar yang mengandungi semua kelas fungsi yang mungkin (biasanya melebihi beberapa MB), kemudian bergantung pada alat seperti PurgeCSS untuk memeriksa fail templat dan menghapus gaya yang tidak digunakan. Mod JIT pula mengubah proses ini sepenuhnya: ia menghasilkan kod CSS secara dinamik dan hanya mengikut keperluan, iaitu hanya kod yang sebenarnya digunakan dalam templat.

Ini bermakna, proses penggantian kod (hot reloading) semasa pembangunan berlaku dengan sangat cepat, kerana anda tidak perlu lagi menguruskan fail CSS yang besar dan berat. Anda boleh menggunakan sebarang variasi kod yang diinginkan dengan bebas. <code>md:hover:bg-blue-500</code>), tanpa perlu risau tentang saiz fail; fail CSS yang dihasilkan akhirnya adalah yang paling ringkas, hanya mengandungi gaya yang anda gunakan, yang sangat meningkatkan prestasi persekitaran produksi.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Pengenalan dan Kemajuan Tailwind CSS: Membina Laman Web Responsif Moden dari Kosong。

Penggunaan praktikal dan kemahiran pembangunan

Reka bentuk responsif dan variasi interaktif

Tailwind CSS Ia dilengkapi dengan sistem reka bentuk responsif yang kuat dan sistem variasi keadaan (state variations), yang boleh diaktifkan dengan mudah menggunakan prefiks penunjuk pengubahsuaian yang ringkas. Titik pemutusan (breakpoints) untuk reka bentuk responsif digunakan secara lalai. sm:、md:、lg:、xl:、2xl: Sebagai prefiks, anda boleh dengan mudah mendefinisikan gaya yang berbeza untuk saiz skrin yang berbeza.

Pada masa yang sama, menguruskan keadaan interaksi juga menjadi sangat mudah. Gunakan… <code>hover:</code>、<code>focus:</code>、<code>active:</code> Untuk prefiks yang menunggu, gaya keadaan yang sesuai boleh didefinisikan terus dalam nama kelas.

<button class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
  Klik pada saya.
</button>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <!-- 在小屏幕上单列，在中等屏幕上三列 -->
  <div>Projek 1</div>
  <div>Projek 2</div>
  <div>Projek 3</div>
</div>

Gunakan @apply untuk mengekstrak gaya yang seragam.

Untuk kombinasi gaya yang kompleks yang berulang kali muncul dalam projek dan terdiri daripada beberapa kelas fungsi, menulisnya berulang kali dalam HTML akan kelihatan berlebihan. Dalam kes ini, anda boleh menggunakan… <code>@apply</code> Arahan ini membenarkan anda untuk “mengekstrak” satu siri kelas fungsi daripada fail CSS yang disesuaikan, dan menggabungkannya ke dalam satu kelas khusus yang baru dan bermakna (semantik). Dengan cara ini, kelebihan aliran kerja kelas fungsi dapat dikekalkan, sementara kod dapat digunakan semula (dipertingkatkan penggunaannya).

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.

/* 在你的CSS文件中 */
.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply btn bg-blue-500 text-white;
  @apply hover:bg-blue-700;
}

Kemudian, anda boleh menggunakannya dalam HTML. <code>class="btn-blue"</code> Ya. Ini merupakan amalan yang cemerlang dalam mencapai keseimbangan antara atomisasi (pembahagian sesuatu menjadi komponen yang lebih kecil) dan komponenisasi (penggunaan komponen yang telah dibina sebelumnya dalam pembangunan aplikasi).

Berintegrasi secara mendalam dengan rangka kerja berkomponen

Tailwind CSS Ia sangat sesuai dengan rangka kerja komponen moden di bahagian hadapan (front-end) seperti React, Vue, dan Svelte. Dalam komponen tersebut, anda boleh mengemas struktur HTML yang mempunyai nama kelas dari Tailwind menjadi komponen UI yang berdiri sendiri dan boleh digunakan berulang kali. Dengan cara ini, butiran gaya tersembunyi di dalam komponen, dan yang ditunjukkan kepada pengguna hanyalah antara muka komponen yang jelas. Ini menyelesaikan masalah potensi kesukaran membaca kod yang disebabkan oleh terlalu banyak nama kelas dalam HTML, dan mengikat gaya dengan logik serta struktur komponen dengan lebih erat, meningkatkan modulasi dan kebolehjagaan kod.

Proses Integrasi dan Pembinaan Projek

Pemasangan dan Konfigurasi Asas

Mengintegrasikan dalam projekTailwind CSSBiasanya, ini dilakukan melalui pengurus pakej seperti npm atau yarn. Pertama, pasang Tailwind serta kebergantungan yang diperlukan, kemudian buat fail konfigurasi.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Permulaan Tailwind CSS: Membina Laman Web Responsif yang Moden Dari Kosong。

npm install -D tailwindcss
npx tailwindcss init

Selepas proses penginisian, nilai lalai akan dijana. <code>tailwind.config.js</code> Fail. Seterusnya, anda perlu memasukkan komponen-komponen Tailwind ke dalam fail CSS global atau fail CSS utama projek anda.

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

<code>@tailwind base</code> Yang disuntikkan adalah gaya asas (Preflight), yang digunakan untuk memulihkan gaya lalai pelayar.<code>@tailwind components</code> Digunakan untuk menyuntikkan apa-apa yang melalui… <code>@apply</code> Kelas komponen khusus yang telah diekstrak;<code>@tailwind utilities</code> Maka, semua kelas fungsi akan disuntikkan (diimplimentasikan).

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

Konfigurasi pemindaian kandungan dan pengoptimuman pengeluaran

Untuk memastikan bahawa mod JIT (Just-In-Time) atau PurgeCSS dapat mengenal pasti dengan betul gaya-gaya yang digunakan, adalah perlu untuk… <code>tailwind.config.js</code> Konfigurasi dalam bahasa Cina <code>content</code> Opsi ini memberitahu Tailwind fail-fail mana yang perlu diimbas untuk mencari nama kelas.

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

Akhir sekali, lakukan konfigurasi yang sesuai mengikut alat pembinaan yang anda gunakan (seperti Vite, Webpack, PostCSS) untuk memastikan proses pembinaan Tailwind berjalan dengan lancar. Dalam persekitaran pembangunan, anda akan menikmati kemas kini dinamik yang sangat cepat berkat ciri JIT (Just-In-Time compilation); manakala semasa pembinaan untuk pengeluaran, anda akan mendapat fail CSS yang telah dioptimumkan sepenuhnya dan hanya mengandungi gaya yang diperlukan sahaja.

RINGKASAN

Tailwind CSS Ia bukan sekadar sebuah rangka kerja CSS (Cascading Style Sheets), tetapi juga mewakili sebuah metodologi penulisan gaya yang moden dan cekap. Dengan menggunakan nama kelas yang bersifat atomik (atomic class names) yang mengutamakan fungsi, ia membebaskan pembangun daripada keperluan untuk menamai elemen-elemen dengan cara yang rumit dan mengalihkan perhatian mereka daripada aspek konteks, sehingga meningkatkan keintuitifan, fleksibiliti, dan prestasi dalam pembangunan gaya. Sistem reka bentuk yang sangat boleh disesuaikan (highly configurable) digabungkan dengan mod pengeluaran masa nyata (instant production mode), membolehkannya memenuhi keperluan pembinaan reka bentuk yang berkualiti tinggi, serta memastikan prestasi yang optimum pada hasil akhir. Walaupun memerlukan sedikit masa untuk mempelajari sistem nama kelasnya pada mulanya, setelah dikuasai, ia akan menjadi alat yang sangat berkuasa untuk meningkatkan pengalaman dan kecekapan pembangunan bahagian hadapan (front-end development), terutamanya apabila digabungkan dengan pendekatan pembangunan berbentuk komponen (component-based development) untuk membina aplikasi web yang boleh diselenggara dan diperluas.

FAQ - Soalan Lazim

Adakah Tailwind CSS sesuai untuk digunakan dalam semua projek?

Walaupun Tailwind CSS sangat berkuasa, ia tidak sesuai untuk semua situasi. Ia sangat sesuai untuk projek baru atau projek yang sedang diperbaiki yang memerlukan reka bentuk yang sangat disesuaikan, mengutamakan kecekapan pembangunan, dan menggunakan pendekatan arsitektur berkomponen. Bagi projek yang memerlukan penghantaran yang cepat, di mana kawalan ke atas reka bentuk akhir tidak begitu tinggi, atau di mana pasukan pembangunan lebih biasa dengan gaya penulisan CSS yang bersifat semantik (semantic CSS), penggunaan perpustakaan komponen UI seperti Bootstrap mungkin lebih sesuai. Bagi halaman statik yang sangat ringkas, menulis kod CSS secara manual mungkin lebih langsung dan mudah.

Adakah menulis begitu banyak kelas dalam HTML akan mempengaruhi prestasi halaman?

Ia tidak akan mempengaruhi prestasi semasa penggunaan aplikasi. Kelajuan pelayar dalam merender gaya yang terdapat dalam tag atau fail CSS luaran adalah bergantung pada jumlah dan kerumitan pemilih CSS (CSS selectors). CSS yang dihasilkan oleh Tailwind adalah berstruktur sangat ringkas, menggunakan pemilih kelas tunggal (single-class selectors). .mt-4Kemampuan renderingnya sangat cemerlang, malah lebih baik daripada banyak pilihan (selectors) yang kompleks. Selain itu, fail CSS yang dihasilkan dalam mod JIT biasanya jauh lebih kecil berbanding dengan yang ditulis secara manual atau menggunakan rangka kerja tradisional, yang mengurangkan masa penghantaran melalui rangkaian dan seterusnya meningkatkan prestasi keseluruhan.

Bagaimana untuk mengurus masalah nama kelas dalam Tailwind CSS yang terlalu panjang?

Untuk nama kelas elemen yang terlalu panjang, terdapat beberapa cara untuk mengurusnya: 1) Gunakan… <code>@apply</code> 1) Ekstrak kombinasi yang berulang menjadi kelas komponen khusus (custom component classes). 2) Dalam rangka kerja seperti Vue/React, pakailah nama kelas yang panjang untuk elemen-elemen yang ingin dijadikan komponen yang boleh digunakan semula (reusable components). 3) Manfaatkan fungsi pelipatan kod (code folding) atau penyuntingan dengan beberapa kursor (multi-cursor editing) dalam editor untuk meningkatkan kecekapan penulisan kod. Dalam pembangunan berbasis komponen, nama kelas yang panjang disimpan di dalam komponen tersebut dan tidak kelihatan kepada pihak luar, oleh itu kebolehjagaan (maintainability) kod tetap tinggi.

Bagaimanakah untuk memastikan konsistensi dalam penulisan gaya (style) menggunakan Tailwind semasa kerjasama berpasukan?

Konsistensi boleh dipastikan melalui beberapa cara: 1) Membina dan berkongsi panduan yang seragam di kalangan pasukan. <code>tailwind.config.js</code> Fail konfigurasi: Kunci token reka bentuk (warna, jarak, dll.). 2) Tentukan dan gunakan semula dalam projek. <code>@apply</code> Atau blok gaya teras yang digunakan untuk mengapsulasi komponen (seperti butang, kotak masukan). 3) Gunakan tambahan (plugin) untuk ESLint (seperti…) eslint-plugin-tailwindcss) Untuk mengatur susunan dan memeriksa nama kelas. 4) Semasa pemeriksaan kod, fokuskan perhatian kepada cara pelaksanaan gaya (style implementation).

Bagaimanakah Tailwind CSS menyokong keserasian dengan pelbagai pelayar web?

Tailwind CSS v3+ direka khusus untuk browser moden dan menyokong semua browser utama seperti Chrome, Firefox, Safari, dan Edge. Ia menggunakan ciri-ciri CSS terkini seperti CSS Grid, Flexbox, dan atribut CSS yang boleh disesuaikan. Jika perlu menyokong browser lama seperti Internet Explorer 11, langkah tambahan perlu diambil, seperti mengaktifkan mod JIT (Just-In-Time compilation) dan mengkonfigurasi PostCSS dengan betul. autoprefixer Plugin ini digunakan untuk menambahkan awalan nama pembekal, dan mungkin perlu menutup beberapa ciri yang tidak kompatibel dalam konfigurasi (seperti…) backgroundOpacity）。