Mula dari kosong: Membina laman web responsif moden menggunakan Tailwind CSS

Dalam bidang web yang kini mengejar pembangunan yang cekap, rangka kerja CSS yang berfokuskan pada kegunaan praktikal semakin menjadi pilihan utama. Di antaranya,Tailwind CSS Ia menonjol dengan konsep uniknya yang dikenali sebagai “atomization”. Konsep ini tidak menyediakan komponen siap pakai, sebaliknya menawarkan satu set kelas yang terperinci dan boleh digabungkan dengan bebas, membolehkan pembangun membina sebarang reka bentuk dengan cepat terus dalam HTML. Selamat tinggal pada zaman di mana kita perlu memikirkan nama kelas dengan teliti…Tailwind CSS Menggalakkan penggunaan kombinasi untuk mencapai gaya yang diinginkan telah meningkatkan dengan ketara kebolehlanjutan dan konsistensi dalam pembangunan antaramuka pengguna (UI), dan merupakan alat yang sangat berguna dalam pembangunan laman web responsif moden.

Memahami kelebihan utama Tailwind CSS

Rangka CSS tradisional seperti Bootstrap menyediakan ciri-ciri seperti… .btn、.card Komponen siap pakai seperti ini, walaupun boleh digunakan sebaik sahaja dibuka kotak, sering memerlukan banyak penyesuaian gaya (style adjustments) semasa reka bentuk yang sangat khusus, yang menyebabkan kod menjadi berat dan timbul konflik antara keperluan khusus yang berbeza (specificity conflicts).Tailwind CSS Menggunakan falsafah yang sangat berbeza: menyediakan kelas-klas atom yang mempunyai satu tanggungjawab sahaja.

Atomic classes with a focus on practicality

Tailwind CSS Nama kelas tersebut secara langsung berkorespondensi dengan satu sifat CSS yang tertentu. Sebagai contoh,.mt-4 corresponding margin-top: 1rem;，.text-blue-500 Nilai warna biru yang setara dalam sistem heksadesimal. Reka bentuk ini bermakna anda tidak perlu berulang-alik antara fail HTML dan CSS, dan hampir tidak perlu menulis kod CSS yang khusus. Semua keputusan berkaitan gaya (style) dibuat pada peringkat templat, yang membolehkan proses reka bentuk prototaip dan pengulangan (iteration) berjalan dengan sangat cepat.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Dari permulaan hingga mahir: Panduan muktamad untuk meningkatkan kecekapan pembangunan front-end dengan Tailwind CSS.。

Ketelusan yang tinggi dalam penyesuaian dan konsistensi reka bentuk

Melalui direktori akar projek tailwind.config.js Fail konfigurasi – anda boleh mengawalnya sepenuhnya. Tailwind Sistem reka bentuk ini membenarkan anda untuk menentukan palet warna, saiz fon, nisbah jarak antara elemen, titik pemutusan (breakpoints), dan lain-lain. Ini memastikan bahawa keseluruhan projek mengikuti satu set piawaian reka bentuk yang ketat, di mana mana-mana pembangun boleh menggunakan “bahasa reka bentuk” yang sama untuk membina komponen aplikasi, seterusnya menjaga konsistensi antara elemen antaramuka pengguna (UI) yang sangat tinggi semasa kerjasama berpasukan.

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 →

Fail produksi yang ringkas dan dijana mengikut keperluan

Ramai orang yang pertama kali menggunakannya akan bimbang bahawa kumpulan pustaka (library) yang besar akan menyebabkan saiz fail CSS menjadi terlalu besar.Tailwind CSS Melalui PurgeCSS (yang telah disatukan dalam versi yang diperbaharui) @tailwindcss/jit Atau dalam enjin terkini, masalah ini dapat diselesaikan. Ia akan menganalisis fail-fail projek anda secara automatik (seperti HTML, JS, komponen Vue, React), dan hanya mengumpulkan kelas CSS yang digunakan ke dalam fail CSS akhir untuk persekitaran produksi, menghasilkan fail gaya yang sangat kompak—biasanya hanya beberapa KB sahaja.

Mulakan projek Tailwind CSS pertama anda.

Tidak perlu menggunakan rangka yang rumit; anda boleh mengintegrasikannya dengan cepat melalui pelbagai cara. Tailwind CSS。

Dapatkan pengalaman pantas melalui CDN.

Untuk tujuan pembelajaran atau reka bentuk prototaip yang ringkas, anda boleh memperkenalkannya terus melalui pautan CDN (Content Delivery Network). Walaupun cara ini tidak membenarkan penggunaan beberapa ciri lanjutan (seperti arahan, plugin, atau pengoptimuman untuk pengeluaran), ia sangat sesuai untuk mendapatkan pengalaman yang cepat.

<!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 class="bg-gray-100">
  <h1 class="text-3xl font-bold text-center text-blue-600 mt-8">
    Hai, Tailwind!
  </h1>
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md p-6 mt-4">
    Ini adalah sebuah kad yang dibina dengan cepat menggunakan Tailwind CSS.
  </div>
</body>
</html>

Menggunakan PostCSS untuk membina projek rasmi

Untuk projek pengeluaran, disyorkan untuk menggunakan Node.js dan PostCSS semasa proses pemasangan bagi mengakses semua ciri yang tersedia.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Kelebihan utama dan falsafah reka bentuk Tailwind CSS.。

Pertama sekali, mulakan projek dengan menggunakan npm atau yarn, kemudian pasang semua perpustakaan yang diperlukan:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Ini akan menjana satu tetapan lalai. tailwind.config.js Fail. Seterusnya, buat sebuah fail CSS (contohnya… src/input.css), dan gunakan @tailwind Arahan untuk mengandungi setiap lapisan dalam rangka (frame).

/* src/input.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Kemudian, konfigurasikan alat pembinaan (seperti Vite, Webpack) untuk mengurus fail CSS tersebut, atau gunakannya secara langsung. tailwindcss Pembinaan dilakukan menggunakan CLI (Command Line Interface):

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.

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

Akhir sekali, masukkan kandungan yang dihasilkan ke dalam kod HTML anda. ./dist/output.css Dokumen.

Menguasai reka bentuk responsif dan keadaan interaktif

Membina laman web yang moden, responsif, dan memberikan maklum balas interaktif adalah sangat penting.Tailwind CSS Sebuah penyelesaian yang sangat elegan telah disediakan untuk ini.

Responsif breakpoint yang mengutamakan peranti mudah alih

Tailwind Gunakan sistem titik henti (breakpoint) yang mengutamakan penggunaan peranti mudah alih. Kelas-kelas praktikal yang disediakan secara lalai (seperti…) .text-lg、.ml-2Apabila tiada prefiks, gaya tersebut akan digunakan untuk semua saiz skrin. Anda boleh menentukan gaya untuk saiz skrin yang lebih besar dengan menambahkan prefiks yang sesuai.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Panduan Ultimate Tailwind CSS: Membina Laman Web Responsif Moden dari Awal。

Poin pemotongan (breakpoints) lalai 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 akan disusun secara bertindih (stacked), manakala pada skrin bersaiz sederhana, elemen-elemen tersebut akan dipaparkan bersebelahan (side by side).

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

<div class="flex flex-col md:flex-row">
  <div class="p-4 bg-blue-200 md:w-1/2">Kandungan di sebelah kiri</div>
  <div class="p-4 bg-green-200 md:w-1/2">Kandungan di sebelah kanan.</div>
</div>

Variasi keadaan yang mudah digunakan

Dengan menambahkan prefiks “status” pada kelas-kelas praktikal, anda boleh dengan mudah mendefinisikan gaya elemen-elemen dalam keadaan seperti berada di atas tetikus (hover), fokus (focused), aktif (activated), dan lain-lain.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300">
  点击我
</button>

Dalam kod di atas,hover:bg-blue-700 Menunjukkan bahawa warna latar belakang akan berubah menjadi biru gelap apabila tetikus diletakkan di atasnya.transition 和 duration-300 Maka, animasi peralihan warna yang lancar telah ditambahkan kepadanya. Dengan cara yang sama, anda juga boleh menggunakan… focus:、active:、disabled: Prefixes can be used to define other states.

Mod gelap disokong.

Tailwind CSS Terdapat sokongan untuk mod gelap yang telah dibina dalam sistem. Pertama sekali, tailwind.config.js Aktifkan:

module.exports = {
  darkMode: 'class', // 或 'media'
  // ... 其他配置
}

Tetapkan kepada ‘class’ Ketika itu, anda perlu secara manual menambahkannya ke dalam elemen akar HTML (seperti <html>) Tukar ke... class="dark"Set to ‘media’ Apabila ia diaktifkan, ia akan mengikut skema warna sistem pengguna. Setelah diaktifkan, anda boleh menggunakannya. dark: Prefiks digunakan untuk mendefinisikan gaya (style) dalam mod gelap (dark mode).

<div class="bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100">
  Tukar warna latar belakang dan warna teks berdasarkan corak yang dipilih.
</div>

Teknik Lanjutan dan Ekosistem

Apabila anda telah mahir dengan penggunaan asas, teknik dan alat berikut dapat membantu meningkatkan pengalaman pembangunan anda ke tahap yang lebih tinggi.

Mengekstrak komponen dan menggunakan @apply

Walaupun Tailwind Galakkan penggunaan kelas praktikal secara langsung dalam HTML. Namun, untuk kombinasi gaya yang kompleks yang berulang kali muncul dalam projek, anda boleh menggunakan… @apply Arahan dalam CSS adalah untuk mengekstrak “kelas komponen”.

/* 在你的 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 focus:ring-opacity-75;
}

Kemudian, gunakan terus dalam HTML. class=“btn-primary” Itu sahaja. Ini mengimbangi keflexibelan dari segi kegunaan praktikal dengan kemudahan penyelenggaraan yang disediakan oleh komponen-komponen tersebut.

Pelbagai tambahan (plugins) rasmi dan komuniti yang tersedia.

Tailwind CSS Mempunyai sebuah ekosistem yang penuh dengan kehidupan dan dinamisme. Pihak berkuasa telah menyediakan pelbagai kemudahan dan sokongan, seperti… @tailwindcss/typography(Digunakan untuk memperindah kandungan yang bersifat prosa.)@tailwindcss/forms(Gaya borang yang lebih baik)@tailwindcss/aspect-ratio Selain daripada itu, terdapat juga pelbagai tambahan (plugin) yang tersedia. Komuniti juga telah menyumbang banyak plugin, yang digunakan untuk integrasi ikon, animasi, peningkatan penampilan bar skrol, dan sebagainya, yang secara signifikan memperluas keupayaan rangka kerja tersebut.

Berintegrasi dengan mendalam dengan rangka kerja front-end yang dominan

Tidak kira sama ada anda menggunakan React, Vue, Svelte atau rangka kerja lain,Tailwind CSS Semuanya boleh disatukan dengan lancar (seamlessly integrated). Banyak alat pembinaan (framework scaffolding tools) seperti Next.js, Nuxt.js, dan Vite menyediakan kemudahan yang siap digunakan (out-of-the-box). Tailwind Template. Dengan menggabungkan sistem komponen rangka kerja, anda boleh membina perpustakaan komponen UI yang sangat boleh digunakan semula, mempunyai gaya yang konsisten, dan mudah diselenggara.

RINGKASAN

Tailwind CSS Ia bukan sekadar sebuah rangka kerja CSS, tetapi juga merupakan inovasi dalam proses pembangunan bahagian hadapan (front-end development). Dengan konsep keutamaan yang praktikal, ia memindahkan keputusan berkaitan gaya (style decisions) daripada fail gaya (style sheets) ke dalam templat antara muka pengguna (UI templates) yang anda bina, sehingga meningkatkan kecekapan pembangunan dan konsistensi reka bentuk yang luar biasa. Dari susun atur responsif (responsive layout) hingga keadaan interaktif (interactive states), daripada mod gelap (dark mode) hingga pengoptimuman prestasi (performance optimization), ia menyediakan penyelesaian yang elegan dan berkuasa. Walaupun proses pembelajarannya memerlukan masa untuk menghafal nama kelas (class names), sekali anda menguasainya, anda akan mendapat kebebasan dan kelajuan yang belum pernah ada sebelumnya dalam membina antara muka pengguna. Bagi semua pembangun yang mencari gaya antara muka pengguna yang moden, cekap, dan mudah diselenggara…Tailwind CSS Semua ini merupakan pilihan yang sangat baik untuk dipelajari dengan mendalam dan digunakan dalam persekitaran produksi.

FAQ - Soalan Lazim

Adakah nama kelas dalam Tailwind CSS yang panjang akan menyebabkan kod HTML menjadi kacau?

Ini memang kebimbangan yang sering dialami oleh pemula. Walaupun dalam HTML… class Properti mungkin kelihatan panjang, tetapi ini memusatkan semua logik gaya pada satu tempat (lapisan pandangan), mengelakkan perlu sering bertukar antara fail HTML dan CSS. Dalam pembangunan sebenar, dengan penggunaan komponen yang baik (seperti komponen React/Vue), nama kelas ini akan dikapsulkan dalam komponen yang boleh digunakan semula, sehingga menjaga kod menjadi kemas dan teratur. Manfaat daripada peningkatan kelajuan pembangunan dan konsistensi reka bentuk jauh lebih besar daripada kerugian kecil dalam aspek kebolehbacaan kod.

Bagaimana untuk menyesuaikan atau memperluas gaya lalai Tailwind?

Semua kerja yang disesuaikan telah selesai. tailwind.config.js Ia dilakukan dalam fail tersebut. Anda boleh melakukannya dengan… theme.extend Anda boleh menggunakan objek untuk menambah nilai baru atau menggantikan nilai lalai, seperti memperluas senarai warna, menambah saiz jarak, dan sebagainya. Pada masa yang sama, anda juga boleh membuat kelas yang berguna dengan menulis plugin. Untuk gaya yang digunakan sekali sahaja, anda masih boleh menulis fail CSS tradisional, atau menggunakan alat lain yang sesuai. @apply Arahan untuk menggabungkan kelas-kelas yang berguna.

Bagaimanakah Tailwind CSS dibandingkan dengan CSS-in-JS atau penyelesaian komponen gaya?

Tailwind CSS Kedua-dua CSS-in-JS (seperti Styled-components) bertujuan untuk menyelesaikan masalah kebolehjagaan (maintainability) kod CSS, tetapi dengan pendekatan yang berbeza.Tailwind Ia merupakan rangka kerja CSS yang mengutamakan kepraktisan, manakala CSS-in-JS adalah teknik di mana gaya (styles) ditulis dalam JavaScript dan diterapkan secara lokal pada komponen-komponen tertentu. Kedua-duanya boleh digunakan bersama-sama, tetapi biasanya perlu dipilih salah satu sahaja. Tailwind Biasanya, prestasi semasa penggunaan aplikasi lebih baik (kerana akhirnya ia hanya menggunakan CSS tulen), saiz fail yang lebih kecil (melalui proses Purge), dan terdapat kawalan yang lebih ketat terhadap elemen-elemen reka bentuk (design tokens).

Dalam persekitaran produksi, adakah saiz fail CSS yang dihasilkan oleh Tailwind benar-benar kecil?

Ya, itulah yang dimaksudkan. Tailwind CSS Salah satu kelebihan utama adalah fungsi Purge yang terdapat dalam versi terkini. Fungsi ini menganalisis kod sumber secara statik semasa proses pembinaan, mengenal pasti semua nama kelas yang digunakan, dan hanya menyertakan gaya-gaya yang diperlukan ke dalam fail CSS yang dihasilkan. Untuk sebuah projek biasa, saiz fail CSS akhir biasanya kurang dari 10KB, yang merupakan kelebihan yang ketara berbanding dengan banyak rangka kerja tradisional yang menghasilkan fail CSS yang tidak dikompresi dan berukuran ratusan KB.

Saya patut beralih dari Bootstrap ke Tailwind CSS?

Ia bergantung pada keperluan projek anda dan pilihan pasukan anda. Jika projek anda sangat bergantung pada tema dan komponen pra-bina Bootstrap, dan tidak banyak penyesuaian yang dilakukan, maka migrasi mungkin tidak akan memberikan manfaat yang besar. Namun, jika anda telah melaburkan banyak masa untuk menyesuaikan komponen Bootstrap, sering menulis kod untuk menggantikan gaya yang sedia ada, atau jika pasukan anda mengutamakan kebebasan reka bentuk yang lebih tinggi dan kecekapan pembangunan, maka migrasi ke sistem lain mungkin lebih sesuai. Tailwind CSS Ia akan sangat berguna. Saya mencadangkan untuk bermula dengan projek baru atau modul yang berdiri sendiri, dan menilai sama ada aliran kerjanya sesuai untuk pasukan anda.