Bagaimana untuk membina laman web yang moden dan responsif dengan cepat menggunakan Tailwind CSS?

Kelebihan utama Tailwind CSS adalah:

Di antara banyak-banyak rangka kerja CSS,Tailwind CSS Ia menonjol dengan konsep utamanya yang berfokuskan pada kegunaan (Utility-First). Framework CSS tradisional seperti Bootstrap menyediakan pelbagai komponen siap pakai, seperti butang, kad, dan bar navigasi untuk kami gunakan. Tailwind CSS Sebaliknya, ia tidak menyediakan sebarang komponen yang telah direka terlebih dahulu, tetapi sebaliknya menawarkan satu set kelas alat CSS yang bersifat terperinci (fine-grained) dan atomized (tidak boleh dibahagikan lagi). Ini bermakna, pembangun boleh membina antara muka pengguna yang sepenuhnya disesuaikan dengan menggabungkan kelas-kelas alat ini terus pada elemen HTML, sama seperti membina blok bangunan.

Mod ini membawa beberapa kelebihan yang ketara. Pertama sekali, ia meningkatkan kecekapan pembangunan dengan ketara. Anda tidak perlu lagi memikirkan nama kelas CSS untuk setiap elemen, dan juga mengelakkan perlu berulang-alik antara fail CSS dan HTML. Semua gaya ditulis terus dalam HTML, menjadikannya mudah untuk difahami. Kedua, ia menghapuskan kod CSS yang tidak digunakan sepenuhnya. Ini dicapai melalui pengoptimuman oleh alat pembinaan (build tools).Tailwind CSS Alat kelas yang tidak digunakan dalam projek boleh dikeluarkan secara automatik, menjadikan fail CSS yang dihasilkan sangat ringkas. Akhirnya, ini memastikan konsistensi reka bentuk. Dengan mengikuti satu set token reka bentuk yang telah ditetapkan (seperti warna, jarak, saiz fon), seluruh projek dapat mengekalkan bahasa visual yang seragam, sambil masih membolehkan fleksibiliti reka bentuk yang tidak terhad.

Mula dengan cepat dan konfigurasi projek

Untuk mula menggunakannya, sila ikuti langkah-langkah yang diberikan. Tailwind CSSCara yang paling mudah adalah dengan menginisialisasikannya menggunakan alat CLI rasmi mereka. Pertama sekali, anda perlu memasangnya dalam direktori projek anda menggunakan npm atau yarn. tailwindcss Pembungkusan, dan menjana fail konfigurasinya.

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

npm install -D tailwindcss
npx tailwindcss init

Selepas menjalankan arahan di atas, sebuah fail akan dihasilkan dengan nama tailwind.config.js Ini adalah fail konfigurasi utama. Fail ini digunakan untuk menyesuaikan pengaturan mengikut keperluan anda. Tailwind CSS Pusat penghubung utama. Di sini, anda boleh mengembangkan warna tema, jenis font, titik pemutusan (breakpoints), atau mengkonfigurasi laluan untuk PurgeCSS (yang digunakan semasa pembinaan produksi untuk menghapus gaya yang tidak digunakan). Berikut adalah contoh konfigurasi 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 →

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {
        'brand-blue': '#1992d4',
      }
    },
  },
  plugins: [],
}

Seterusnya, anda perlu memasukkan kod tersebut ke dalam fail CSS utama (root CSS file) projek anda. Tailwind CSS Arahan tersebut. Biasanya fail ini diberi nama… input.css 或 styles.css。

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

Akhirnya, anda memerlukan proses pembinaan untuk mengurus arahan-arahan ini dan mengubahnya menjadi CSS yang boleh digunakan secara praktikal. Ini biasanya dilakukan menggunakan plugin PostCSS. Jika anda menggunakan alat rangka depan (front-end tools) moden seperti Vite atau Next.js, mereka biasanya sudah menyertakan integrasi untuk PostCSS. Tailwind CSS Dengan sokongan ini, proses konfigurasi akan menjadi lebih mudah.

Menguasai sintaksis kelas alat asas

Tailwind CSS Nama kelas alat (tool classes) mengikuti peraturan yang mudah difahami dan konsisten. Setelah memahami coraknya, penggunaannya akan menjadi lebih lancar. Kelas alat biasanya terdiri daripada kategori atribut dan nilai tertentu, yang dihubungkan dengan tanda hubung (-).

Sebagai contoh, untuk menetapkan nilai padding (pinggiran dalam) p-{size} Format tersebut, di mana... {size} Proporsi jarak yang sepadan dalam konfigurasi tersebut.p-4 Ini bermakna menggunakan padding sebanyak 1rem dalam semua arah. pt-2 Maka, hanya padding sebanyak 0.5rem akan digunakan pada bahagian atas (top). Sama juga, margin akan digunakan untuk bahagian luar (outside). m-{size}。

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

Penetapan gaya teks juga mengikuti corak yang serupa.text-lg Setkan saiz font kepada besar.text-gray-700 Setkan warna teks kepada warna yang bernombor 700 dalam palet warna kelabu.font-bold Setkan fon menjadi tebal.text-center Letakkan teks berpusat.

Kelas-kelas yang berkaitan dengan reka letak (layout) juga sangat kuat.flex Aktifkan susun atur Flexbox.justify-between Align the child elements at both ends of the main axis.items-center Susunkan elemen anak-anak secara berpusat pada paksi silang. Dengan menggabungkan kelas-kelas ini, anda boleh mencapai reka bentuk yang kompleks tanpa perlu menulis sebaris kod CSS yang khusus.

<div class="flex justify-between items-center p-4 bg-white shadow rounded-lg">
  <h2 class="text-xl font-bold text-gray-800">Tajuk Kad</h2>
  <button class="px-4 py-2 bg-blue-500 text-white font-semibold rounded hover:bg-blue-600">
    Klik tindakan
  </button>
</div>

Contoh kod di atas menunjukkan komponen kad yang ringkas, yang menggunakan reka bentuk susun atur (layout) jenis flex, jarak antara elemen (spacing), warna, tepi bulat (rounded corners), dan pelbagai kelas bantu (helper classes), serta mengandungi butang yang mempunyai keadaan “hover” (apabila kursor mouse diletakkan di atasnya).

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.

Mencapai reka bentuk responsif dan interaktif.

Untuk membina laman web yang moden, reka bentuk yang responsif dan maklum balas interaktif adalah sangat penting.Tailwind CSS Kedua-dua masalah tersebut telah diselesaikan dengan elegan melalui penggunaan prefiks (awalan).

Reka bentuk responsif dicapai dengan menambahkan prefiks “breakpoint” di hadapan nama kelas alat (tool classes).Tailwind CSS Lima titik henti (breakpoints) disediakan secara lalai:sm(640px)md(768px)lg(1024px)xl(1280px) dan 2xl(1536px). Cara kerjanya adalah berdasarkan prinsip “mobile-first”: Kelas yang tidak mempunyai prefiks akan berkesan pada semua saiz skrin, manakala kelas yang mempunyai prefiks akan mula berfungsi bermula dari titik pemisahan (breakpoint) tersebut.

<div class="w-full md:w-1/2 lg:w-1/3 p-4">
  <!-- 在移动设备上宽度占满，在中等屏幕占一半，在大屏幕占三分之一 -->
</div>
<div class="block md:flex">
  <!-- 在中等及以上屏幕变为 flex 布局 -->
</div>

Mengenai keadaan interaksi, seperti hover (menyentuh dengan tetikus), focus (fokus), active (aktif), dan lain-lain,Tailwind CSS Variasi awalan yang sesuai juga disediakan. Anda hanya perlu menambahkan awalan keadaan di hadapan kelas alat asas untuk mendefinisikan gaya yang berkaitan dengan keadaan tersebut.

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

<button class="bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 ...">
  交互按钮
</button>

Selain itu, anda juga boleh dengan mudah menyesuaikan atau menambahkan titik henti (breakpoints) baru, variasi keadaan (status variations), dan juga menyokong variasi yang lebih canggih seperti “skema warna pilihan” (dark mode) melalui fail konfigurasi. Setelah mengaktifkan mod gelap, anda hanya perlu menggunakan… dark: Prefiks sahaja boleh digunakan untuk mendefinisikan gaya tema berwarna gelap.

<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <!-- 根据系统主题自动切换背景和文字颜色 -->
</div>

Teknik Lanjutan dan Amalan Terbaik

Seiring dengan pertambahan skala projek, mengikuti beberapa amalan terbaik dapat membantu anda… Tailwind CSS Kod menjadi lebih mudah untuk diselenggara. Pertama sekali, walaupun menyusun kelas alat (tool classes) terus dalam HTML adalah mudah, namun apabila kombinasi gaya yang kompleks digunakan berulang kali di beberapa tempat, anda boleh mempertimbangkan untuk menggunakan pendekatan yang lebih teratur. @layer components Arahan untuk mengekstrak kelas komponen khusus (custom component classes).

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

@layer components {
  .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 sudah cukup. Ini bukan sahaja dapat mengurangkan pengulangan, tetapi juga memastikan kejelasan makna.

Kedua, gunakan dengan bijak. tailwind.config.js Fail-fail tersebut digunakan untuk pengurusan sistem reka bentuk. Warna jenama, jenis font, kesan bayangan, dan lain-lain elemen reka bentuk ditentukan secara seragam dalam konfigurasi yang telah disediakan. theme.extend Dalam objek tersebut, konsistensi global dapat dipastikan, dan ia juga memudahkan penggantian tema secara keseluruhan pada masa akan datang.

Akhir sekali, pastikan pengoptimuman untuk pembinaan produksi (production build) dilakukan dengan betul. Ini termasuk pengaturan dalam fail konfigurasi (configuration files). content Pastikan semua laluan ke fail templat yang mengandungi HTML, JSX, Vue, dan lain-lain telah diset dengan betul dalam atribut tersebut.Tailwind CSS Barulah semasa proses pembinaan, pengoptimuman yang betul dapat dilakukan dengan “menggoyangkan pokok” (yang bermaksud menghapus semua gaya yang tidak digunakan), sehingga menghasilkan fail CSS yang paling ringkas.

RINGKASAN

Tailwind CSS Dengan pendekatannya yang mengutamakan fungsi, ia telah mengubah cara kita menulis dan menggunakan CSS secara mendasar. Ia memindahkan proses membuat keputusan berkaitan gaya (style decisions) daripada fail gaya (style sheets) ke dalam kod markup itu sendiri, sehingga mencapai kelajuan pembangunan yang luar biasa, konsistensi reka bentuk yang tinggi, dan prestasi yang optimum. Dari proses konfigurasi yang cepat, memahami sintaks asas alat-alat yang digunakan, hingga pelaksanaan reka bentuk responsif yang kompleks dan keadaan interaktif, serta mengikuti amalan terbaik seperti pengekstrakan komponen dan penyesuaian token reka bentuk (design tokens), semua ini menjadi lebih mudah dicapai.Tailwind CSS Satu set penyelesaian pembinaan laman web yang moden, lengkap dan cekap disediakan untuk pembangun. Sama ada anda ingin memulakan projek baru dari awal atau ingin memperbaiki aliran kerja reka bentuk (style workflow) bagi projek sedia ada, ini merupakan alat yang sangat berkuasa yang berbaloi untuk dipelajari dan digunakan dengan mendalam.

FAQ - Soalan Lazim

Adakah Tailwind CSS menyebabkan kod HTML menjadi panjang dan berantakan?

Ini adalah kebimbangan yang sering dialami. Memang, senarai kelas pada satu elemen boleh menjadi panjang. Namun, “kepanjangan” ini dibalas dengan kejelasan dan kemudahan penyelenggaraan yang sangat tinggi. Anda tidak perlu berpindah antara berbilang fail, kerana semua gaya ditunjukkan secara langsung pada elemen tersebut. Bagi kombinasi kelas yang kompleks dan sering berulang, anda boleh… @apply Instruks atau rangka kerja berkomponen (seperti komponen Vue, React) perlu digabungkan dengan cara yang efektif untuk mencapai abstraksi yang baik, sehingga dapat menyeimbangkan antara kesederhanaan dan kebolehbacaan.

Dalam projek pasukan, bagaimanakah kita boleh memastikan konsistensi penggunaan Tailwind CSS?

Konsistensi terutamanya dicapai melalui fail konfigurasi. tailwind.config.js Untuk memastikan konsistensi dalam reka bentuk, pasukan harus bekerjasama untuk menyelenggara fail tersebut dan menentukan spesifikasi reka bentuk seperti warna, jarak antara elemen, jenis font, dan kesan bayangan (shade effects). Dengan cara ini, semua ahli pasukan akan menggunakan set standard reka bentuk yang sama. Selain itu, anda boleh menggunakan alat tambahan seperti Prettier untuk membantu memastikan kod yang ditulis mematuhi garis panduan reka bentuk yang telah ditetapkan. prettier-plugin-tailwindcssIa digunakan untuk mengatur susunan nama kelas secara automatik, serta menyelaraskan gaya penulisan kod.

Bolehkah Tailwind CSS digunakan bersama-sama dengan CSS sedia ada atau perpustakaan komponen UI (seperti Bootstrap)?

Boleh, tetapi biasanya tidak disyorkan untuk menggabungkan penggunaan kedua-duanya kerana metodologi mereka mungkin bertentangan. Jika penggunaan bersama-sama adalah mustahil, anda perlu berhati-hati dalam menguruskan konflik gaya dan isu khusus. Pendekatan yang lebih biasa adalah dengan memperkenalkan ciri atau modul baru secara beransur-ansur. Tailwind CSSAtau pindahkan projek sedia ada sepenuhnya ke… Tailwind CSSBeberapa perpustakaan komponen juga menyediakan ciri-ciri yang berdasarkan… Tailwind CSS Versi-versi tersebut, seperti Headless UI, boleh bekerjasama dengan lancar.

Adakah kurva pembelajaran untuk Tailwind CSS agak curam (sukar untuk dipelajari)?

Bagi pembangun yang biasa dengan CSS tradisional atau rangka kerja komponen, mereka perlu menyesuaikan diri dengan pemikiran “pembinaan komponen” pada peringkat awal, yang mungkin mengambil masa beberapa hari. Namun, setelah memahami konvensyen penamaan dan konsep asasnya, kecekapan pembangunan akan meningkat dengan ketara. Dokumen rasmi sangat terperinci dan menyediakan banyak contoh siap guna, menjadikannya sumber terbaik untuk pembelajaran. Reka bentuk nama kelas yang intuitif juga mengurangkan kos ingatan dengan ketara.

Bagaimana untuk menambah gaya atau animasi yang dibuat sendiri ke dalam Tailwind CSS?

Terdapat beberapa cara untuk menambah gaya yang disesuaikan (custom styles). Untuk gaya khusus yang hanya digunakan sekali, anda boleh menggunakan gaya terbenam (inline styles) atau fail CSS tradisional. Bagi gaya yang perlu digunakan di beberapa tempat, amalan terbaik adalah dengan menggunakannya dalam fail CSS utama. @layer Arahan tersebut menyatakan untuk menambahkannya ke lapisan yang sesuai (base, components, utilities), dan kemudian menggunakannya. @apply Untuk mengambil contoh daripada kelas alat yang sedia ada, bagi animasi yang dibina sendiri, anda boleh… tailwind.config.js 的 theme.extend.animation 或 theme.extend.keyframes Ia ditakrifkan dalam…