Pengenalan dan Amalan Tailwind CSS: Membina Antaramuka Web Responsif yang Moden dari Kosong

Apa itu Tailwind CSS?

Dalam pembangunan CSS tradisional, kita biasa mendefinisikan nama kelas yang bermakna (semantically meaningful class names) untuk elemen-elemen halaman, kemudian menulis peraturan gaya yang khusus dalam fail gaya yang berasingan. Kaedah ini sering menyebabkan keperluan untuk berulang-alik antara fail HTML dan CSS, dan apabila projek semakin berkembang, fail gaya menjadi terlalu besar dan sukar untuk diurus.Tailwind CSS Oleh itu, sebuah konsep kerangka CSS yang berbeza sepenuhnya telah digunakan, iaitu konsep “fungsionaliti diutamakan” (functionality-first). Ia menyediakan satu set alat yang besar, terperinci, dan boleh digunakan semula (reusable tools). Pembangun boleh terus membina sebarang reka bentuk dalam HTML atau JSX dengan menggabungkan alat-alat ini.

Kelebihan utamanya adalah ia menghilangkan kebergantungan pada CSS yang dibuat sendiri. Anda tidak perlu lagi memikirkan nama kelas untuk butang, kad atau bar navigasi, dan tidak perlu risau tentang konflik gaya. Sebagai contoh, untuk membuat butang dengan sudut bulat, latar belakang biru, teks putih, dan padding, anda hanya perlu menulis:<button class=“rounded bg-blue-500 text-white p-4”>按钮</button>Cara pembangunan ini telah meningkatkan dengan ketara kelajuan dan konsistensi dalam pembinaan antara muka pengguna. Selain itu, dengan alat seperti PurgeCSS (yang terbina dalam Tailwind v3 dan versi yang lebih baru sebagai enjin pengoptimuman), gaya yang tidak digunakan dapat dikeluarkan secara automatik, menjadikan fail CSS yang dihasilkan sangat ringkas.

Bagaimana untuk memulakan penggunaan Tailwind CSS

Mula menggunakan Tailwind CSS Terdapat pelbagai cara untuk melakukannya, dan yang paling biasa adalah melalui alat CLI (Command Line Interface) rasmi atau dengan mengintegrasikannya dengan alat pembinaan antara muka (front-end building tools).

Diperoleh daripada WEB\nDisyorkan untuk membaca. Guia Pemula untuk Tailwind CSS: Membina Antaramuka Responsif Moden dari Awal。

Pasang dengan cepat menggunakan npm dan CLI.

Cara yang paling disyorkan adalah dengan memasangnya melalui npm dan menggunakan alat baris perintahnya untuk melakukan pengaturan awal (initialization). Pertama, di dalam direktori akar projek anda, jalankan arahan berikut di terminal untuk memasang Tailwind serta kebergantungannya:

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 →

npm install -D tailwindcss
npx tailwindcss init

Arahan pertama akan… tailwindcss Pasang sebagai kebergantungan pembangunan. Arahan kedua akan menjana fail konfigurasi lalai. tailwind.config.jsFail ini merupakan inti bagi penyesuaian tema Tailwind, penambahan plugin, dan pengaturan laluan Purge yang anda buat.

Mengkonfigurasi fail konfigurasi Tailwind

Dijana tailwind.config.js Kandungan awal fail tersebut sangat ringkas. Untuk memastikan Tailwind dapat mengimbas fail HTML anda dan menghapus gaya yang tidak digunakan, anda perlu mengkonfigurasikannya. content Medan (fields). Sebagai contoh, dalam projek Vue atau React yang tipikal, konfigurasinya mungkin kelihatan seperti berikut:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [“./src/**/*.{html,js,vue,jsx,tsx}”],
  theme: {
    extend: {},
  },
  plugins: [],
}

Konfigurasi ini memberitahu Tailwind untuk melakukan pemindaian. src Semua fail dalam direktori yang mempunyai sambungan yang ditentukan, dan kelas alat yang digunakan di dalamnya perlu diekstrak.

Mengintegrasikan gaya asas ke dalam projek

Setelah pemasangan dan konfigurasi selesai, anda perlu memasukkan komponen-komponen Tailwind ke dalam fail CSS utama (root CSS file) projek anda. Biasanya, anda akan membuat sebuah fail dengan nama… src/styles.css 或 src/index.css Fail tersebut, dan tambahkan arahan berikut:

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Tailwind CSS: Panduan Praktikal dari Pemula hingga Mahir.。

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

@tailwind base Yang disuntikkan adalah gaya asas Tailwind, yang digunakan untuk menetapkan semula gaya lalai dan menyediakan asas yang konsisten.@tailwind components Yang disuntikkan adalah komponen-komponen yang disediakan oleh Tailwind (seperti kontainer), serta komponen-komponen lain yang anda buat sendiri. @apply Kelas komponen yang didaftarkan untuk arahan (instruction registration component class).@tailwind utilities Maka semua kelas fungsi telah dimasukkan, dan ini merupakan bahagian yang paling penting.

Akhir sekali, pastikan proses pembinaan anda (seperti menggunakan Vite, Webpack) mampu mengendalikan fail CSS tersebut, atau gunakan arahan CLI (Command Line Interface) yang sesuai. npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch Untuk mengkompilasi secara masa nyata.

Penerangan Terperinci Kelas Fungsi Utama Tailwind CSS

Tailwind CSS Kelas alat tersebut meliputi semua atribut CSS seperti susun atur (layout), jarak antara elemen (spacing), pemformatan teks (typography), warna (colors), garis tepi (borders), dan efek visual (effects). Peraturan penamaannya sangat mudah difahami, dan biasanya mengikuti corak yang konsisten. 属性{方向？}-{尺寸} Mod tersebut.

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.

Kawalan Jarak dan Saiz

Tailwind menggunakan sistem nisbah angka yang seragam untuk mengawal margin dalam dan luar, lebar, dan ketinggian. Sebagai contoh,p-4 \nMenunjukkan padding: 1rem(Standard: 1 unit = 0.25rem)m-2 \nMenunjukkan margin: 0.5remAnda boleh menggunakan… px-、py-、pt-、pr- Praefiks digunakan untuk menentukan arah yang spesifik. Bagi dimensi,w-64 \nMenunjukkan width: 16rem，h-screen \nMenunjukkan height: 100vhKonsistensi ini menjadikan jarak antara elemen-elemen antaramuka serta penjajaran mereka sangat mudah dan teratur.

Warna dan gaya latar belakang

Tailwind menyediakan palet warna yang direka dengan teliti, di mana setiap warna mempunyai kecerahan yang berbeza dari 50 hingga 900. Ini dapat dicapai dengan menggunakan nama kelas tertentu. text-blue-600(Warna teks),bg-gray-100(Warna latar belakang),border-red-300(Warna bingkai) boleh digunakan terus sahaja. Anda juga boleh dengan mudah mengaplikasikan latar belakang bergradasi, sebagai contoh… bg-gradient-to-r from-cyan-500 to-blue-500 Menggambarkan peralihan warna secara linear dari biru muda ke biru, dari kiri ke kanan.

Reka bentuk responsif dan keadaan interaktif

Reka bentuk responsif Tailwind mengikuti prinsip “mengutamakan peranti mudah alih” (mobile-first). Setiap kelas fungsi direka secara lalunya untuk peranti mudah alih. Untuk mengaplikasikan gaya pada saiz skrin yang lebih besar, anda perlu menambahkan prefiks responsif yang sesuai. Sebagai contoh,text-center md:text-left lg:text-2xl Untuk menunjukkan penempatan teks yang terpusat pada peranti mudah alih, pada skrin bersaiz sederhana…md:) dan ke atas, alignment sebelah kiri; pada skrin besar (lg:Untuk saiz teks 16px dan ke atas, tetapkan saiz font kepada… 1.5rem。

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai Tailwind CSS: Panduan konsep-konsep utama dan teknik-teknik praktikal daripada pemula hingga mahir.。

Menguruskan keadaan interaksi juga sangat mudah. Anda boleh menggunakan prefiks seperti… hover:、focus:、active: Mari tambahkan gaya untuk keadaan yang berbeza. Sebagai contoh,<button class=“bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 …”> Kesan hover (menyentuh dengan jari) dan fokus (menumpukan perhatian pada elemen tertentu) boleh dicapai dengan mudah, tanpa perlu menulis sebarang kod CSS khusus.

Pengalaman Praktikal: Membina Komponen Kad menggunakan Tailwind CSS

Mari kita integrasikan semua pengetahuan yang telah dibincangkan dengan membina sebuah komponen kad gaya moden. Komponen kad ini akan merangkumi gambar, tajuk, teks deskripsi, tag, dan butang tindakan, dan ia juga akan bersifat responsif (berfungsi dengan baik pada pelbagai peranti dan saiz skrin).

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

Pertama sekali, kita membina kerangka struktur HTML untuk kad tersebut, dan mengaplikasikan kelas-kelas reka bentuk asas serta kelas-kelas kontena:

<div class="“max-w-sm" rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <!-- 图片区域 -->
  <img class="“w-full" h-48 object-cover” src="“https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600”" alt="“Produk Teknologi”">
  <!-- 内容区域 -->
  <div class="“px-6" py-4”>
    <div class="“font-bold" text-xl mb-2 text-gray-800”>Panduan Praktikal Penggunaan Tailwind CSS</div>
    <p class="“text-gray-600" text-base”>
      Belajar cara menggunakan alat atomization untuk membina antara muka pengguna moden yang menarik, konsisten, dan berprestasi tinggi dengan cepat. Tidak perlu berpindah antara fail yang berbeza; fokuskan pada reka bentuk itu sendiri.
    </p>
  </div>
  <!-- 标签区域 -->
  <div class="“px-6" pt-2 pb-4”>
    <span class="“inline-block" bg-blue-100 text-blue-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”>#CSS Framework</span>
    <span class="“inline-block" bg-green-100 text-green-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># Front-End Development</span>
    <span class="“inline-block" bg-purple-100 text-purple-800 rounded-full px-3 py-1 text-sm font-semibold mr-2 mb-2”># Responsif</span>
  </div>
  <!-- 行动按钮 -->
  <div class="“px-6" pb-6”>
    <button class="“w-full" bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50”>
      Baca sekarang
    </button>
  </div>
</div>

Menganalisis struktur dan gaya kad

Dalam kad ini, kami telah menggunakan sebilangan besar alat kelas (tools classes). Kontainer paling luar yang digunakan adalah… max-w-sm Untuk membataskan lebar maksimum,rounded-xl Mengimplementasikan sudut bulat yang besarshadow-lg Tambahan bayangan yang lebih gelap telah dibuat untuk mencipta rasa ketiga dimensi.bg-white Setkan latar belakang berwarna putih.mx-auto Menghasilkan penempatan yang seimbang secara horizontal.

Kawasan gambar telah dilalui. h-48 Ketinggian telah ditetapkan, dan ia telah digunakan. object-cover 确保图片裁剪填充。内容区的内边距由 px-6 py-4 Kawalan. Tajuk tersebut ditulis dalam tebal (bold).font-bold), saiz teks besar (text-xl）dan jarak bawah (bottom margin)mb-2）。

Tag tersebut menggunakan format blok dalam talian (inline block).inline-block）Bersesuaian dengan warna latar belakang, warna teks, dan tepi bulat (rounded corners).rounded-full）dan padding dalaman yang kecil (px-3 py-1）Untuk mencapai gaya “kapsul”, penggunaan elemen tertentu dalam reka bentuk digunakan. Butang pula dilengkapi dengan latar belakang bergradasi.bg-gradient-to-rHover Gradient Changeshover:from-、hover:to-)、animasi peralihan (transition animations)transition duration-300) dan cincin fokus (focus:ring-2Efek-efek canggih seperti ini.

Membuat komponen kad menjadi responsif

Untuk memastikan kad-kad tersebut kelihatan lebih baik pada skrin yang lebih besar, kita boleh dengan mudah menambahkan beberapa kelas responsif. Sebagai contoh, kita mungkin ingin kad-kad tersebut menyesuaikan diri dengan saiz skrin yang sederhana (misalnya, skrin bersaiz sederhana).md:Untuk saiz 100px dan ke atas, kad boleh disusun secara melintang, dengan gambar di sebelah kiri dan kandungan di sebelah kanan. Kita boleh membuat sedikit pengubahsuaian pada struktur luaran serta kelas yang digunakan untuk gambar dan kandungan tersebut.

<div class="“max-w-4xl" md:flex rounded-xl overflow-hidden shadow-lg bg-white mx-auto my-8”>
  <img class="“md:w-1/3" w-full h-48 md:h-auto object-cover” src="“…”" alt="“…”">
  <div class="“md:w-2/3" p-6 md:p-8”>
    <!-- 标题、描述、标签、按钮等内容 -->
  </div>
</div>

Dengan menambahkan md:flex Jadikan kandungan dalam kontainer tersebut menggunakan susun atur Flex pada skrin bersaiz sederhana, dan gunakan… md:w-1/3 和 md:w-2/3 Kawal nisbah lebar antara kawasan gambar dan kawasan kandungan. Untuk gambar… md:h-auto Biarkan ketinggiannya menyesuaikan diri secara automatik, khususnya untuk kawasan kandungan. md:p-8 Maka, jarak antara elemen-elemen pada skrin besar telah diperbesar. Hanya dengan beberapa perubahan pada kod kelas, sebuah kad responsif (responsive card) telah siap dibina.

RINGKASAN

Tailwind CSS Dengan menggunakan kumpulan kelas (class libraries) yang mengutamakan fungsi dan bersifat atomik, cara kita menulis kod CSS telah berubah sepenuhnya. Alat ini menghilangkan beban mental yang berkaitan dengan penamaan gaya (style naming), sehingga meningkatkan dengan ketara kecekapan dan konsistensi dalam pembangunan antaramuka pengguna (UI development). Dari kawalan jarak yang mudah hingga reka bentuk responsif yang kompleks dan keadaan interaksi, semuanya dapat dicapai dengan cepat dengan menggabungkan nama kelas yang mudah difahami. Walaupun pada pandangan pertama, menulis sejumlah besar nama kelas dalam HTML mungkin kelihatan “tidak elegan”, namun peningkatan pengalaman pembangunan, pengurangan kos penyelenggaraan, serta hasil berupa fail gaya yang berkualiti tinggi menjadikannya penyelesaian gaya yang sangat kompetitif dalam projek web moden. Melalui pengenalan asas dan latihan praktikal dalam artikel ini, saya berharap anda dapat memulakan perjalanan pembangunan yang cekap dengan Tailwind CSS dengan lancar.

FAQ - Soalan Lazim

Apa perbezaan antara Tailwind CSS dan gaya yang dilinkkan (inline styles)?

Tailwind CSS dan gaya yang dilinkkan (inline styles) mempunyai perbezaan yang mendasar. Gaya yang dilinkkan (inline styles)…style=””(Atribut tersebut) tidak membenarkan penggunaan media queries untuk mencapai reka bentuk yang responsif, dan juga tidak dapat mengendalikan keadaan pseudo-class seperti… :hover 或 :focusSelain itu, gaya yang digunakan secara terbenam (inline styles) akan menutupi semua gaya lain, dan kekurangan kawalan atau pengaturan yang jelas.

Alat-alat yang disediakan oleh Tailwind sebenarnya merupakan token reka bentuk yang telah ditentukan terlebih dahulu dan mempunyai kekangan tertentu. Ia berdasarkan sistem reka bentuk yang ketat (seperti nisbah jarak, palet warna, dan titik pemutusan), yang memastikan konsistensi dalam reka bentuk. Pada masa yang sama, Tailwind menyokong sepenuhnya penggunaan prefiks responsif dan prefiks keadaan (state prefixes), dan boleh disesuaikan secara global melalui konfigurasi, yang merupakan kelebihan yang tidak dapat dicapai oleh gaya dalaman (inline styles).

Dalam projek yang besar, apakah yang perlu dilakukan jika nama kelas dalam HTML terlalu panjang dan menyebabkan kekacauan?

Untuk gaya komponen yang kompleks yang muncul berulang kali, Tailwind mengesyorkan penggunaan… @apply Arahan untuk mengekstrak kelas komponen dalam CSS, atau secara langsung menggunakan keupayaan pengkomponenan dari rangka JavaScript (seperti React, Vue) untuk mengemaskannya.

Sebagai contoh, anda boleh mengumpulkan semua kelas butang yang kompleks tersebut ke dalam satu kelas komponen CSS.

.btn-primary {
  @apply w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-medium py-3 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-300 focus:ring-opacity-50;
}

Kemudian, gunakan dalam HTML secara langsung. <button class=“btn-primary”>Amalan yang lebih baik adalah untuk mencipta satu komponen (component) dalam React. <Button> Komponen, atau mencipta satu dalam Vue <MyButton> Komponen: Masukkan gaya (style) ke dalam komponen tersebut, supaya templat dapat kekal ringkas.

Bagaimanakah Tailwind CSS mengoptimumkan saiz fail CSS yang dihasilkan pada akhirnya?

Tailwind CSS akan menjana sebuah fail gaya yang besar yang mengandungi semua kelas alat yang mungkin, dalam mod pembangunan, untuk memudahkan proses pembangunan yang cepat. Namun, semasa pembinaan produksi (production build), ia akan melaksanakan satu langkah pengoptimuman yang sangat penting.

Ia akan berdasarkan konfigurasi yang anda tetapkan dalam fail konfigurasi. tailwind.config.js 的 content Path fail yang ditentukan dalam bidang tersebut akan digunakan untuk mengimbas semua fail templat (seperti .html, .jsx, .vue) untuk mengenal pasti nama kelas alat yang sebenarnya digunakan. Kemudian, semua gaya yang tidak digunakan akan dikeluarkan sepenuhnya daripada fail CSS akhir. Proses ini telah dioptimumkan dengan baik, dan biasanya dapat mengurangkan saiz fail CSS akhir kepada 10KB atau lebih kecil, seterusnya meningkatkan prestasi aplikasi dengan ketara.

Adakah boleh menyesuaikan sistem reka bentuk lalai Tailwind?

Sudah tentu, ini juga merupakan salah satu kekuatan Tailwind CSS. Semua penyesuaian dapat dilakukan dengan mudah. tailwind.config.js Ia dilakukan dalam fail tersebut.

Anda boleh melakukannya di theme.extend Anda boleh mengembangkan tema lalai untuk objek tersebut, seperti menambah warna baru, nilai jarak, saiz fon, atau titik pemutusan (breakpoints). Anda juga boleh… theme Objek tersebut secara langsung menggantikan beberapa bahagian tema lalai. Sebagai contoh, anda boleh menyesuaikan warna utama dan titik pemutusan (breakpoints) seperti berikut:

module.exports = {
  theme: {
    extend: {
      colors: {
        ‘brand-blue’: ‘#1992d4’,
      },
      spacing: {
        ‘128’: ‘32rem’,
      }
    },
    screens: {
      ‘tablet’: ‘640px’,
      ‘laptop’: ‘1024px’,
      ‘desktop’: ‘1280px’,
    },
  },
}

Dengan cara ini, anda boleh menggunakannya dalam projek anda. bg-brand-blue、w-128 dan tablet: Inilah kelas-kelas kustomisasi seperti itu.