Pengenalan cepat dan latihan praktikal Tailwind CSS: Membina antaramuka UI moden dari awal.

Apa itu Tailwind CSS?

Dalam penulisan CSS tradisional, kami biasa mencipta nama kelas semantik untuk setiap komponen UI dan menulis peraturan gaya terperinci dalam lembar gaya berasingan. Walaupun cara ini mempunyai struktur yang jelas, namun ia sering menyebabkan lembar gaya menjadi terlalu besar, nama kelas sukar untuk diselenggara, dan memerlukan peralihan yang kerap antara fail HTML dan CSS. Tailwind CSS mengemukakan penyelesaian yang berbeza - kerangka kerja CSS atomik yang memberi keutamaan kepada kebolehramalan.

Idea utamanya adalah untuk menyediakan satu set alat CSS berbutir halus dan berfungsi tunggal, yang membolehkan pembangun menggunakannya secara langsung pada unsur-unsur HTML. class Gabungkan kelas-kelas ini dalam atribut untuk membina reka bentuk. Sebagai contoh, untuk membuat butang biru yang terletak di tengah, anda tidak perlu lagi menulis kod dengan nama… .btn-primary Anda tidak perlu menggunakan atribut style="..." untuk mengaplikasikan CSS kepada elemen. Sebaliknya, anda boleh menulis CSS secara langsung dalam HTML. class="px-4 py-2 bg-blue-500 text-white rounded text-center"Cara ini sangat mempercepatkan pembinaan UI, membolehkan gaya dan struktur berkaitan erat, dan secara efektif mengelakkan konflik gaya global.

Tailwind CSS, sebagai rangka kerja depan yang sangat boleh disesuaikan, mempunyai sistem reka bentuk yang lengkap, di mana jarak, warna, saiz fon dan ciri-ciri lain dijana berdasarkan fail tema yang boleh dikonfigurasi, memastikan konsistensi reka bentuk. Dengan menggunakan versi rasmi @tailwindcss Plugin PostCSS, yang akan menganalisis fail projek anda secara pintar pada fasa pembinaan, dan hanya mengemas kelas-kelas alat yang digunakan ke dalam CSS akhir, lalu menghasilkan fail gaya dengan saiz minimum.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Menguasai teknik-teknik teras Tailwind CSS: panduan pembangunan UI moden dari tahap permulaan hingga tahap profesional.。

Bagaimana untuk melakukan konfigurasi persekitaran dan inisialisasi projek

Untuk mula menggunakan Tailwind CSS, anda mesti mengintegrasikannya ke dalam projek front-end anda. Cara utama integrasi ini adalah melalui Node.js dan PostCSS. Langkah-langkah berikut akan membimbing anda melalui pembinaan projek asas.

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 →

Memasangkan pergantungan melalui pengurus pakej.

Pertama, inisialisasi projek Node.js di bawah direktori root projek (jika belum diinisialisasi), dan kemudian pasangkan dependensi yang diperlukan melalui npm atau yarn. Anda perlu memasangkan tailwindcss Secara peribadi,postcss dan autoprefixer(Untuk menambahkan prefiks pengilang pelayar secara automatik). Anda boleh menggunakan perintah berikut untuk pemasangan:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

npx tailwindcss init -p Perintah ini akan menjana dua fail konfigurasi utama:tailwind.config.js 和 postcss.config.jsDi antaranya,tailwind.config.js Ini adalah fail konfigurasi utama untuk mengustomisasi tema, plugin, dan sumber kandungan Tailwind anda.

\nLaluan ke fail templat konfigurasi.

Untuk membolehkan Tailwind melakukan “Tree Shaking” dengan betul, iaitu hanya mengemas gaya yang digunakan, anda perlu melakukan ini di dalam tailwind.config.js Dokumen tersebut content Tentukan laluan untuk semua fail templat yang mengandungi nama kelas Tailwind dalam array. Ini merupakan langkah penting, jika tidak, mungkin tidak akan ada sebarang gaya dalam persekitaran produksi.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx,vue}"], // 根据你的项目结构调整
  theme: {
    extend: {},
  },
  plugins: [],
}

Memperkenalkan arahan gaya asas.

Selanjutnya, dalam fail CSS utama anda (seperti ), tambahkan kod berikut: ./src/styles.css 或 ./src/index.cssDi bahagian atas (), tambahkan tiga arahan teras Tailwind.

Diperoleh daripada WEB\nDisyorkan untuk membaca. Analisis mendalam Tailwind CSS: Kerangka CSS pragmatik untuk pembangunan front-end moden.。

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

@tailwind base Apa yang disuntikkan ialah gaya pra-penyemakan Tailwind (berdasarkan modern-normalize) dan beberapa gaya lapisan asas.@tailwind components Ia akan menyuntik kelas-kelas komponen yang anda daftarkan dalam konfigurasi, atau beberapa kelas komponen rasmi, seperti container。@tailwind utilities Kemudian, injek semua kelas utiliti. Ini adalah sumber gaya utama.

Akhir sekali, import fail CSS ini dalam fail masuk projek anda dan pastikan aliran pembinaan anda (seperti menggunakan Vite, Webpack, dll.) telah mengkonfigurasi PostCSS untuk memprosesnya. Selepas itu, anda boleh menggunakan kelas-kelas alat Tailwind dalam projek anda.

Penjelasan terperinci tentang kelas-kelas alat utama dan kes-kes praktikal.

Tailwind CSS menyediakan kelas-kelas alat yang meliputi hampir semua atribut CSS. Memahami peraturan penamaannya adalah kunci untuk penggunaan yang berkesan. Penamaannya biasanya mengikuti corak “atribut-nilai” atau “atribut-arah-nilai”, dan menggunakan singkatan yang bermakna.

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.

Kontrol susun atur dan jarak

Untuk susun atur, kelas-kelas alat yang paling sering digunakan termasuk kelas-kelas kawalan paparan. flex, hidden, block, inline-block Dsb. Untuk susun atur Flexbox dan Grid, Tailwind menyediakan rangkaian alat yang lengkap, seperti justify-center, items-center, grid-cols-3 dan sebagainya.

Kawalan jarak adalah teras sistem reka bentuk Tailwind. Ia menggunakan skala pembesaran yang seragam (secara lalai ialah gandaan 0.25rem, atau 4px). Sebagai contoh:
- m-4 \nMenunjukkan margin: 1rem;
- p-2 \nMenunjukkan padding: 0.5rem;
- mx-auto Menunjukkan margin luaran dalam arah horizontal sebagai auto, biasanya digunakan untuk elemen-elemen blok yang dipusatkan.
- space-x-4 Dipergunakan untuk menambah jarak mendatar antara unsur anak dalam bekas Flex atau Grid.

Modifikasi warna dan gaya

Tailwind mempunyai palet warna yang kaya dan boleh diperluas. Nama-nama kelas warna biasanya terdiri daripada nama warna dan tahap ketumpatan, seperti bg-blue-500(Warna latar belakang),text-gray-800(Warna teks),border-red-300（Warna bingkai）。

Diperoleh daripada WEB\nDisyorkan untuk membaca. Membina laman web responsif moden menggunakan Tailwind CSS: dari permulaan hingga panduan amali.。

Untuk penyesuaian gaya, anda boleh menggabungkan nama-nama kelas dengan mudah untuk mencapai kesan yang kompleks:

<!-- 一个渐变背景的圆角按钮 -->
<button class="px-6 py-3 rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold shadow-lg hover:shadow-xl transition-shadow duration-300">
  点击我
</button>

Dalam kod di atas,bg-gradient-to-r Mencipta gradien linier dari kiri ke kanan.shadow-lg 和 hover:shadow-xl Terdapat bayangan yang ditambahkan untuk keadaan lalai dan keadaan menggantung.transition-shadow duration-300 Kemudian, animasi peralihan yang lancar ditambahkan ke perubahan bayangan.

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

Reka bentuk responsif dan variasi keadaan.

Reka bentuk responsif Tailwind menggunakan strategi “berorientasikan mudah alih”. Kelas alat lalai sesuai untuk semua saiz skrin, manakala kelas berpraxis (seperti <) adalah untuk peranti mudah alih. md:, lg:(b) Kemudian, aplikasi tersebut akan berfungsi pada skrin yang ditentukan dan skrin di atasnya.

<!-- 在小屏幕上堆叠，在中屏幕上横向排列 -->
<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>

Selain prefiks responsif, Tailwind juga menyokong prefiks varian keadaan, seperti hover:, focus:, active:, disabled:Ini membuatkan penambahan gaya kepada keadaan interaktif menjadi sangat mudah.

<input class="border border-gray-300 rounded p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />

Apabila kotak input ini mendapat fokus, efek lingkaran biru akan muncul, dan ini dicapai dengan menggunakan focus:ring-* Ini dilaksanakan oleh kelas.

Teknik-teknik lanjutan dan amalan terbaik.

Apabila projek menjadi rumit, mengikuti beberapa amalan terbaik dapat membantu mengekalkan keterbacaan dan prestasi tinggi kod.

Mengekstrak komponen dan menggunakan arahan @apply.

Walaupun ia mudah untuk menggabungkan kelas-kelas alat secara langsung dalam HTML, namun jika kombinasi gaya yang kompleks berulang di pelbagai tempat, anda harus mempertimbangkan untuk mengekstraknya sebagai komponen. Dalam CSS tradisional, anda akan mencipta kelas baharu. Dalam Tailwind, anda mempunyai dua pilihan:

1. Gunakan komponen JavaScript: Dalam rangka kerja seperti React, Vue, dll., amalan terbaiknya adalah mencipta fail JavaScript/komponen yang boleh digunakan semula untuk menggabungkan kelas-kelas gaya yang berulang.
2. Gunakan @apply Arahan: Dalam fail CSS anda, anda boleh menggunakan Instructions: In your CSS file, you can use @apply Ekstrak seluruh set alat ke dalam kelas kustom baru.

/* 在 styles.css 中 */
.btn-primary {
  @apply px-6 py-3 bg-blue-600 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 transition duration-200 ease-in-out;
}

Kemudian ia boleh digunakan dalam HTML. class="btn-primary"Perlu diperhatikan bahawa penggunaan berlebihan @apply Ini akan berubah menjadi penulisan CSS tradisional, dan harus digunakan dengan berhati-hati untuk pola gaya yang sangat sering digunakan.

Sistem reka bentuk yang boleh disesuaikan secara mendalam.

Kehebatan Tailwind terletak pada kebolehkonfigurasiannya. Anda boleh tailwind.config.js Dokumen tersebut theme.extend Beberapa ekstensi mengubah tema lalai, atau dalam theme Sebahagiannya diliputi secara langsung.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      },
      spacing: {
        '128': '32rem',
      }
    },
    // 或者直接覆盖默认断点
    // screens: {
    //   'tablet': '640px',
    //   'laptop': '1024px',
    //   'desktop': '1280px',
    // },
  },
}

Oleh itu, anda boleh menggunakan bg-brand-blue 或 w-128 Inilah kelas-kelas kustomisasi seperti itu.

Mengoptimumkan pembinaan persekitaran produksi

Pastikan anda content Konfigurasi yang betul meliputi semua fail yang menjana nama kelas secara dinamik (seperti fail JavaScript/TypeScript). Apabila anda menjalankan perintah binaan produksi (seperti npm run build), npm run buildSebagai contoh, Tailwind akan melancarkan PurgeCSS (kini telah diintegrasikan dalam enjin) untuk membuang semua gaya yang tidak digunakan. Untuk mendapatkan saiz fail yang minimum, elakkan mencipta nama kelas lengkap secara dinamik dalam penyatuan rentetan, kerana ini mungkin menyebabkan alat tersebut tidak dapat menganalisisnya secara statik.

RINGKASAN

Tailwind CSS telah mengubah alur kerja pembangun dalam membina antaramuka pengguna dengan konsep reka bentuk atomiknya yang memberi keutamaan kepada kemudahan penggunaan. Ia menyediakan pelbagai kelas alat yang terperinci, yang membolehkan gaya dan struktur HTML digabungkan dengan erat, lalu meningkatkan kecekapan pembangunan dan konsistensi reka bentuk. Daripada konfigurasi persekitaran, penggunaan kelas alat teras dengan mahir, hingga aplikasi reka bentuk responsif dan variasi keadaan, serta pengurusan projek kompleks melalui pengekstrakan komponen dan penyesuaian mendalam, Tailwind CSS menyediakan penyelesaian yang kuat dan fleksibel untuk pembangunan web moden. Menguasainya bukan sekadar mempelajari satu set alat CSS baharu, tetapi juga merangkul paradigma pembangunan UI yang lebih cekap dan boleh dikekalkan.

FAQ - Soalan Lazim

Adakah fail CSS yang dihasilkan oleh Tailwind CSS akan menjadi sangat besar?

Tidak. Inilah salah satu kelebihan utama Tailwind CSS. Dalam mod pembangunan, fail CSS memang agak besar (biasanya lebih dari beberapa MB) untuk menyediakan semua kelas alat yang mungkin. Namun, dalam fasa pembinaan produksi, ia akan menganalisis fail projek anda (content Dengan menggunakan fail yang ditentukan dalam konfigurasi, anda boleh “mengurangkan saiz” secara tepat, dan hanya mengekalkan kelas-kelas alat yang anda benar-benar gunakan. Fail CSS yang dihasilkan biasanya hanya berukuran beberapa KB hingga puluhan KB, yang jauh lebih kecil daripada CSS yang ditulis tangan atau berasal daripada rangka kerja tradisional.

Dalam projek pasukan, bagaimana untuk mengekalkan konsistensi dan kebolehbacaan kod Tailwind?

Kunci untuk mengekalkan konsistensi kod adalah dengan memanfaatkan sepenuhnya fail konfigurasi Tailwind. tailwind.config.jsTim harus bersetuju tentang definisi token reka bentuk projek, seperti warna jenama, fon, nisbah jarak dan titik putus. Untuk kombinasi gaya kompleks yang berulang, sangat disyorkan untuk mengemasnya sebagai komponen rangka depan (seperti React, Vue), dan bukan menyalahgunakan dalamnya. @apply Arahan. Pada masa yang sama, anda boleh menggunakan plugin Prettier (seperti Instructions. At the same time, you can use the Prettier plugin (such as prettier-plugin-tailwindcssIni dilakukan dengan mengurutkan nama-nama kelas, yang dapat meningkatkan keterbacaan senarai nama kelas yang panjang secara signifikan.

Adakah Tailwind CSS menyokong mod gelap?

Sokong sepenuhnya. Tailwind CSS mempunyai fungsi mod gelap terbina dalamnya. Anda boleh menggunakannya di sini. tailwind.config.js Melalui darkMode: 'media' 或 darkMode: 'class' Untuk mengaktifkannya. Gunakan 'media' Apabila ini berlaku, Mod Gelap akan beralih secara automatik berdasarkan keutamaan warna sistem operasi pengguna. Gunakan 'class' Apabila ini berlaku, anda perlu berada dalam elemen akar HTML (seperti ) untuk mengaksesnya. <html>(3) Tambah atau buang secara manual class="dark" Untuk mencetuskan peralihan. Kemudian, anda boleh menggunakan dark: Menggunakan prefiks varian untuk mentakrifkan gaya dalam mod gelap, seperti dark:bg-gray-900 dark:text-white。

Bagaimana untuk mengubah gaya komponen pustaka pihak ketiga?

Apabila menggunakan pustaka UI pihak ketiga dengan gaya sendiri, kerana gaya mereka mungkin mempunyai kekhususan yang lebih tinggi, menggunakan kelas-kelas alat Tailwind secara langsung mungkin tidak dapat menutupinya. Terdapat beberapa strategi untuk mengatasi ini: Pertama, cuba gunakan !important Modifier, tambahkan selepas kelas alat. !Seperti bg-red-500!Ini akan menambahkan kepada kenyataan gaya tersebut. !importantKedua, jika boleh, konfigurasikan untuk memasukkan CSS pustaka pihak ketiga sebelum CSS yang dihasilkan oleh Tailwind, supaya gaya Tailwind akan mempunyai keutamaan yang lebih tinggi. Akhir sekali, sebagai langkah terakhir, anda masih boleh menulis sebuah kod CSS tradisional yang kecil, menggunakan selektor dengan spesifisiti yang lebih tinggi untuk mengecualikannya.