Apa itu Tailwind CSS?
Tailwind CSS adalah sebuah rangka kerja CSS yang mengutamakan fungsi, yang membantu pembangun membina antara muka pengguna yang diperibadikan dengan cepat dengan menyediakan sebilangan besar kelas utiliti yang terpisah dan boleh digabungkan. Berbeza dengan perpustakaan komponen tradisional seperti Bootstrap, Tailwind tidak menyediakan komponen siap dengan gaya yang tetap (seperti butang, kad), sebaliknya ia menawarkan satu siri kelas yang lebih terperinci. .p-4、.text-blue-500、.flex Dengan menggabungkan kelas-kelas ini pada elemen HTML, pembangun dapat mencipta gaya yang diinginkan “secara segera”, yang dengan itu meningkatkan dengan ketara fleksibiliti dan kecekapan dalam pembangunan gaya.
Falsafah terasnya adalah “kebebasan dalam batasan”. Ia menyediakan satu sistem reka bentuk yang direka dengan teliti, yang merangkumi jarak antara elemen, warna, saiz fon, titik pemutusan (breakpoints), dan sebagainya. Pembangun dapat mencipta kandungan dalam sistem ini, yang bukan sahaja memastikan konsistensi reka bentuk, tetapi juga mengelakkan keperluan untuk menulis kod CSS yang berulang-ulang. Pendekatan ini secara signifikan mengurangkan beban kognitif akibat peralihan yang kerap antara fail gaya (style files) dan fail HTML, membolehkan pembangun lebih fokus pada pembinaan fungsi utama aplikasi tersebut.
Bagaimana untuk memulakan penggunaan Tailwind CSS
Terdapat dua cara utama untuk mengintegrasikan Tailwind CSS ke dalam projek anda: pertama, melalui CDN (Content Delivery Network) untuk mendapatkan pengalaman penggunaan yang cepat dan mudah; kedua, menggunakan alat pembinaan (build tools) untuk pembangunan projek yang lebih formal dan terstruktur.
Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Praktikal Bahasa Cina untuk Tailwind CSS: Membina Antara Muka Pengguna Responsif Moden dari Awal。
Dapatkan pengalaman pantas melalui CDN.
Untuk pembelajaran atau pembuatan prototaip dengan cepat, cara yang paling mudah adalah dengan menggunakan Play CDN. Anda hanya perlu... Tambahkan pautan skrip ke dalam tag tersebut.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold text-blue-600">
Hai, Tailwind CSS!
</h1>
</body>
</html>Cara ini adalah mudah dan cepat, tetapi kekurangan beberapa ciri canggih dari Tailwind, seperti “tree-shaking” dan pengoptimuman untuk persekitaran produksi. Oleh itu, ia tidak disyorkan untuk digunakan dalam projek produksi yang formal.
Mengintegrasikan projek menggunakan PostCSS
Untuk projek front-end moden (seperti yang menggunakan Vite, Next.js, atau Webpack), disyorkan untuk memasangnya menggunakan PostCSS. Pertama sekali, pasang Tailwind CSS dan kebergantungannya menggunakan npm atau yarn.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss initArahan ini akan menjana satu… tailwind.config.js Fail konfigurasi. Seterusnya, anda perlu mengedit fail masuk CSS untuk projek tersebut (biasanya... ./src/index.css 或 ./src/input.cssIntroduce the Tailwind commands within the (…) code.
@tailwind base;
@tailwind components;
@tailwind utilities;Akhir sekali, konfigurasikan alat pembinaan anda (seperti Vite atau Webpack) untuk menggunakan PostCSS untuk memproses fail CSS. Untuk projek Vite, ia biasanya akan dikenal pasti secara automatik. postcss.config.js Fail. Setelah menyelesaikan langkah-langkah ini, anda boleh mula menggunakan kelas-kelas berguna dari Tailwind dalam fail HTML atau JSX projek anda.
Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Tailwind CSS: Panduan Pembangunan Komponen Praktikal Dari Permulaan Hingga Kemahiran Lanjutan。
Kelas-kelas praktikal teras dan reka bentuk responsif.
Kekuatan Tailwind CSS terletak pada koleksi kelas praktikal yang besar dan teratur. Kelas-kelas ini meliputi semua atribut CSS seperti susun atur (layout), jarak (spacing), pemformatan (typography), warna (colors), garis tepi (borders), dan efek (effects).
Contoh kelas praktikal yang sering digunakan
Reka letak (layout) dan jarak antara elemen (spacing) merupakan aspek yang paling sering digunakan dalam pembangunan harian..flex、.grid Digunakan untuk membuat reka letak (layout)..p-4、.m-2 Digunakan untuk mengawal padding dan margin dalaman serta luaran;.space-x-4 Kita boleh menambah jarak horizontal antara anak elemen yang mempunyai reka bentuk yang fleksibel (elastic layout).
Kelas untuk pemformatan dan warna mengawal secara langsung penampilan teks dan latar belakang..text-xl Menetap saiz fon.font-semibold Menetap ketebalan font..text-gray-700 Menetapkan warna teks.bg-blue-100 Setkan warna latar belakang.
Kelas untuk border (bingkai) dan rounded corners (hujung bulat) seperti… .border、.rounded-lg Ia membolehkan penambahan efek bingkai (border) dan tepi bulat (rounded corners) dengan cepat. Kategori efek tersebut termasuk… .shadow-md Digunakan untuk menambahkan bayangan..transition-all Digunakan untuk menambahkan animasi peralihan.
Mengimplementasikan reka bentuk responsif
Tailwind menggunakan sistem titik pemutusan (breakpoints) yang mengutamakan peranti mudah alih. Kelas-kelas yang berguna akan digunakan secara laluan pada semua saiz skrin, dan anda boleh menentukan agar ia hanya berkesan pada titik pemutusan tertentu atau saiz skrin yang lebih besar dengan menambahkan prefiks. Prefiks titik pemutusan yang disediakan dalam Tailwind termasuk:sm: (640px)md: (768px)lg: (1024px)xl: (1280px)2xl: (1536px).
Sebagai contoh, kod berikut mencipta reka bentuk yang bertindak seperti berikut: pada peranti mudah alih, elemen-elemen tersebut disusun secara bertindih (stacked), manakala pada skrin bersaiz sederhana, elemen-elemen tersebut disusun secara mendatar (horizontal).
Diperoleh daripada WEB\nDisyorkan untuk membaca. Mengerti dengan Mendalam Tailwind CSS: Panduan Pembinaan Gaya Dari Prinsip Ke Amalan。
<div class="flex flex-col md:flex-row">
<div class="p-4 md:w-1/2">Kandungan di sebelah kiri</div>
<div class="p-4 md:w-1/2">Kandungan di sebelah kanan.</div>
</div>Kaedah deklaratif ini menjadikan pembinaan antara muka yang responsif sangat intuitif dan cekap, di mana anda tidak perlu meninggalkan fail HTML untuk menulis kueri media (media queries).
Ciri-ciri Lanjutan dan Konfigurasi Sesuai Keperluan
Selain daripada penggunaan asas, Tailwind juga menyediakan banyak ciri yang kuat untuk menghadapi situasi yang lebih kompleks.
Menggunakan keadaan “hover” dan “focus”
Tailwind menyediakan prefiks untuk variasi keadaan (state variants), yang membolehkan anda menambah gaya (styles) kepada keadaan interaktif dengan mudah. Beberapa prefiks yang sering digunakan ialah: hover:、focus:、active:、disabled: dan sebagainya.
<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">
点击我
</button>Sistem Reka Bentuk Diperibadikan
Walaupun Tailwind menyediakan sistem reka bentuk lalai yang lengkap, anda masih boleh membuat penyesuaian yang mendalam berdasarkan jenama projek anda. Ini dilakukan dengan membuat perubahan pada… tailwind.config.js Dilaksanakan melalui fail.
Sebagai contoh, anda boleh mengembangkan atau menggantikan warna, jenis font, jarak antara elemen-elemen dalam tema tersebut. Konfigurasi berikut menambahkan warna jenama yang disesuaikan dan memperluas nisbah jarak antara elemen-elemen:
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#1a73e8',
},
spacing: {
'128': '32rem',
}
},
},
plugins: [],
}Setelah konfigurasi selesai, anda boleh menggunakannya. .text-brand-primary 和 .p-128 Kelas-kelas seperti ini.
Ekstrak komponen dan arahan penggunaan.
Untuk mengelakkan penulisan berulang kombinasi kelas yang sama dalam HTML, Tailwind menggalakkan penggunaan… @apply Arahan tersebut adalah untuk mengeluarkan kelas-kelas praktikal yang sering digunakan ke dalam kelas komponen CSS.
/* 在你的 CSS 文件中 */
.btn-primary {
@apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400;
}Kemudian, gunakan nama kelas yang dibuat sendiri ini secara langsung dalam HTML:<button class="btn-primary">保存</button>Ini bukan sahaja mengekalkan prinsip keutamaan keberkesanan (utility priority) Tailwind, tetapi juga mencapai prinsip DRY (Don’t Repeat Yourself).
RINGKASAN
Tailwind CSS telah mengubah sepenuhnya cara pembangun front-end menulis gaya (styles) melalui metodologinya yang unik dan berfokuskan pada kegunaan (utility-first). Ia memindahkan pembinaan gaya daripada fail CSS tradisional ke dalam tag HTML, dan mencapai keseimbangan yang sempurna antara kelajuan pembangunan dan fleksibiliti reka bentuk dengan menggabungkan sebilangan besar kelas praktikal yang berskala kecil dan terikat dengan sistem reka bentuk yang telah ditetapkan. Dari penggunaan yang mudah melalui CDN hingga integrasi projek yang kompleks, daripada kelas susun atur asas hingga variasi keadaan (states) yang canggih dan penyesuaian yang mendalam, Tailwind menyediakan satu set alat yang lengkap, berkesan, dan boleh diperluas. Menguasai Tailwind CSS bermakna anda dapat membina antara muka pengguna yang moden dan disesuaikan dengan lebih sedikit kod, dengan lebih cepat, sekali gus meningkatkan dengan ketara kecekapan pembangunan front-end dan kelancaran kerjasama pasukan.
FAQ - Soalan Lazim
Adakah fail gaya CSS Tailwind akan menjadi sangat besar?
Tidak. Ini adalah salah satu kelebihan utama Tailwind. Pada fasa pembinaan produksi, Tailwind menggunakan teknologi PurgeCSS (dipanggil “Content Scanning” dalam versi 3.0 dan seterusnya) untuk menganalisis fail-fail projek anda (seperti HTML, JSX, template Vue) secara pintar, dan hanya menyimpan kelas CSS yang sebenarnya digunakan. Akibatnya, sebuah fail CSS yang sangat kecil dan telah dioptimumkan dihasilkan. Gaya yang tidak digunakan akan dipadamkan sepenuhnya, memastikan saiz fail yang dihasilkan adalah minimum.
Adakah kod akan menjadi sukar untuk dibaca dan diselenggara jika terlalu banyak nama kelas ditulis dalam HTML?
Pada mulanya, mungkin ada kebimbangan mengenai perkara ini, tetapi pengalaman menunjukkan bahawa ini biasanya merupakan masalah kebiasaan. Berbanding dengan menyimpan gaya dalam fail CSS yang berasingan, menulis gaya terus pada elemen HTML menjadikan penampilan akhir elemen tersebut lebih jelas, tanpa perlu berpindah antara fail untuk mencari maklumat yang diperlukan. Untuk kombinasi kelas yang kompleks, anda boleh menggunakan… @apply Pemisahan arahan menjadi kelas komponen yang bermakna, atau pemecahan segmen yang berulang menjadi komponen templat yang boleh digunakan semula (seperti dalam React, Vue), merupakan amalan pengkomponenan yang baik. Amalan pengkomponenan yang baik dapat membantu menyelesaikan masalah penyelenggaraan dengan berkesan.
Apa perbezaan antara Tailwind CSS dan rangka kerja tradisional seperti Bootstrap?
Konsep asas kedua-duanya berbeza. Bootstrap menyediakan komponen yang siap digunakan, seperti bar navigasi, kad, dan kotak modal, dan anda boleh menyesuaikannya dengan mengubah pemboleh ubah CSS yang telah ditentukan atau dengan menutupi gaya tersebut. Sebaliknya, Tailwind tidak menyediakan komponen dengan gaya yang tetap; ia hanya menyediakan “bahan mentah” yang diperlukan untuk membina komponen tersebut (kelas atom). Oleh itu, Tailwind menawarkan kebebasan penyesuaian yang lebih tinggi, tanpa terikat pada gaya komponen lalai, menjadikannya lebih mudah untuk mencipta reka bentuk yang unik dan berkarakteristik untuk sesuatu jenama. Bootstrap sesuai untuk situasi di mana anda perlu membina sistem pengurusan standard dengan cepat, manakala Tailwind lebih sesuai untuk pembangunan aplikasi moden yang memerlukan penyesuaian reka bentuk yang lebih mendalam.
Bagaimana untuk menambahkan CSS yang dibuat sendiri ke dalam Tailwind?
Terdapat beberapa kaedah standard. Yang paling disyorkan adalah untuk menggunakan... @layer Arahan untuk menambah gaya tersuai pada lapisan asas (base), komponen (components), dan alat (utilities) dalam Tailwind memastikan bahawa gaya tersebut dapat digabungkan dengan betul dengan peraturan pembinaan (generation rules) Tailwind. Sebagai contoh,@layer components { ... }Anda juga boleh menulis peraturan CSS biasa secara langsung, asalkan anda memastikan bahawa fail CSS khusus anda diimport selepas arahan Tailwind, supaya ia dapat digantikan jika perlu. Untuk nilai yang mudah, amalan terbaik adalah… tailwind.config.js 的 theme.extend Konfigurasi dilakukan di sini.
Selanjutnya, apa yang perlu kita lakukan seterusnya?
Bacaan lanjutan dan pengetahuan praktikal
Konten berikut berkaitan dengan topik artikel ini dan sesuai untuk bacaan lanjut. Lebih baik untuk memulakan dengan artikel yang paling dekat dengan masalah anda sekarang, dan kemudian secara bertahap mengembangkan ke topik yang berkaitan, kerana ini biasanya akan memberikan hasil yang lebih baik.
- Pembinaan Laman Web: Panduan Teknikal Lengkap Untuk Membina Laman Web Profesional Dari Kosong
- Panduan Langkah demi Langkah Pembinaan Laman Web: Analisis Langkah-Langkah Komprehensif Dari Asas Hingga Penggunaan Profesional
- Menguasai Tailwind CSS teras: panduan pembangunan front-end moden dari kelas-kelas praktikal hingga reka bentuk responsif.
- Menguasai keseluruhan proses pembinaan laman web: Panduan Teknikal dan Amalan Terbaik dari Tahap Awal Hingga Pelancaran
- Membina laman web yang berjaya: Panduan lengkap pembinaan laman web dari awal hingga akhir
Bahasa Melayu