Menyusun CSS Tersuai dengan Lapisan
Gunakan @layer base, @layer components dan @layer utilities untuk mengawal kekhususan serta memastikan gaya tersuai disepadukan dengan betul ke dalam output Tailwind.
Menyusun CSS Tersuai dengan Lapisan ialah pelajaran Tailwind CSS Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Tailwind CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Cabaran Kaskad CSS
Apabila kelas utiliti Tailwind digabungkan dengan CSS tersuai, konflik kekhususan boleh berlaku. Peraturan CSS tersuai seperti .btn { color: red; } mungkin mengatasi utiliti Tailwind text-blue-500 disebabkan susunan sumber, walaupun anda mahu utiliti tersebut menang. Arahan @layer Tailwind menyelesaikan masalah ini dengan memberi anda kawalan jelas tentang tempat gaya tersuai dimasukkan dalam kaskad CSS.
Tiga Lapisan Tailwind
Tailwind menyusun semua CSS yang dijana ke dalam tiga lapisan mengikut turutan: base berada di tempat pertama dan mengandungi tetapan semula serta lalai pada peringkat elemen. components berada di tempat kedua dan direka untuk abstraksi kelas berbilang utiliti. utilities berada di tempat terakhir dan mengandungi semua kelas utiliti satu tujuan. Susunan ini memastikan utiliti sentiasa mengatasi gaya komponen, manakala gaya komponen sentiasa mengatasi gaya asas — hierarki yang boleh dijangka dan disengajakan.
/* Order in final CSS output: */
/* 1. @layer base (element defaults) */
/* 2. @layer components (component classes) */
/* 3. @layer utilities (utility classes) */
/* Your main CSS entry file */
@tailwind base; /* injects base layer */
@tailwind components; /* injects components layer */
@tailwind utilities; /* injects utilities layer */Menggunakan @layer base
Lapisan asas ialah tempat yang sesuai untuk tetapan semula pada peringkat elemen, gaya lalai elemen HTML dan gaya global yang digunakan tanpa syarat. Kegunaan lazim termasuk menetapkan fon lalai badan, menetapkan peraturan box-sizing, menetapkan semula margin tajuk dan mentakrifkan gaya pautan. Gaya dalam lapisan asas boleh diatasi oleh apa-apa sahaja dalam lapisan komponen atau utiliti.
@layer base {
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
@apply font-sans antialiased text-gray-900 bg-white;
}
h1 { @apply text-3xl font-bold tracking-tight; }
h2 { @apply text-2xl font-semibold tracking-tight; }
h3 { @apply text-xl font-semibold; }
a {
@apply text-blue-600 hover:underline;
}
img {
max-width: 100%;
height: auto;
}
}Menggunakan @layer components
Lapisan komponen digunakan untuk mengekstrak gabungan utiliti yang berulang menjadi kelas bernama menggunakan @apply. Kelas komponen yang ditakrifkan di sini boleh diatasi oleh kelas utiliti yang digunakan dalam HTML kerana utiliti berada dalam lapisan utiliti yang muncul kemudian. Hal ini menjadikan kelas komponen anda fleksibel — kelas tersebut menetapkan lalai yang munasabah dan sentiasa boleh disesuaikan bagi setiap tika menggunakan utiliti.
@layer components {
.card {
@apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
}
.btn {
@apply inline-flex items-center px-4 py-2 rounded-lg font-medium text-sm
transition-colors duration-150 focus:outline-none focus:ring-2;
}
.input {
@apply w-full border border-gray-300 rounded-lg px-4 py-2 text-sm
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}
}Menggunakan @layer utilities
Lapisan utiliti digunakan untuk kelas utiliti tersuai satu tujuan yang tidak disediakan oleh Tailwind secara terbina dalam. Utiliti ini mungkin digunakan untuk sifat CSS yang belum terdapat dalam teras Tailwind, sifat berawalan khusus pelayar atau nilai gubahan yang terlalu khusus untuk skala lalai. Utiliti dalam lapisan ini mempunyai keutamaan tertinggi dan mengatasi gaya asas serta gaya komponen.
@layer utilities {
/* CSS text-wrap utilities (not in Tailwind core) */
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
/* Content visibility for performance */
.content-auto {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
/* Custom scrollbar hiding */
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
}Mengapa Penempatan Lapisan Penting untuk Kekhususan
Kekhususan CSS biasanya bergantung pada kekuatan pemilih. Namun, spesifikasi Lapisan Kaskad CSS (yang dimanfaatkan oleh Tailwind) mengatasi kekhususan: peraturan dalam lapisan yang muncul kemudian sentiasa menang berbanding peraturan dalam lapisan terdahulu, tanpa mengira kerumitan pemilih. Ini bermakna kelas dalam lapisan .utilities seperti .p-4 (satu kelas) secara automatik menang berbanding kelas dalam lapisan .components seperti .card.padded.extra (tiga kelas).
@layer components {
/* Even with 3 classes, this loses to any utility */
.card.padded.extra {
padding: 100px; /* will be overridden by p-4 utility */
}
}
@layer utilities {
/* One class in utilities layer always wins */
.p-4 { padding: 1rem; } /* wins! */
}
<!-- In HTML: p-4 correctly applies because utilities layer > components layer -->
<div class="card padded extra p-4">Correct padding: 1rem</div>Lapisan Tersuai di Luar Tiga Lapisan Tailwind
Anda tidak terhad kepada tiga lapisan lalai Tailwind. Anda boleh mentakrifkan lapisan bernama tersuai sepenuhnya menggunakan CSS @layer dan mengawal tempat lapisan tersebut muncul dalam kaskad dengan mengisytiharkannya mengikut susunan yang betul di bahagian atas fail CSS anda. Ini berguna untuk mengintegrasikan pustaka CSS pihak ketiga pada titik tertentu dalam kaskad atau untuk mencipta seni bina berlapis dalam CSS anda sendiri.
/* Declare layer order at the top of your CSS */
@layer reset, base, vendors, components, utilities, overrides;
/* Then fill in each layer */
@layer reset {
* { box-sizing: border-box; margin: 0; }
}
@layer vendors {
/* Third-party library styles here */
}
@layer overrides {
/* Emergency overrides — highest specificity */
.force-hidden { display: none !important; }
}Gaya di Luar Sebarang Lapisan
CSS yang ditulis di luar mana-mana blok @layer mempunyai kekhususan lebih tinggi daripada mana-mana gaya berlapis. Ini bermakna CSS tersuai yang anda tulis tanpa membungkusnya dalam @layer akan sentiasa mengatasi utiliti berlapis Tailwind, dan berpotensi menyebabkan isu susun atur yang tidak dijangka. Sentiasa bungkus gaya tersuai anda dalam lapisan yang sesuai — atau cipta lapisan pengatasan secara jelas — untuk mengelakkan konflik dengan kaskad Tailwind.
/* CAUTION: This is outside any layer and overrides ALL layered styles */
.btn {
color: red; /* This will override dark:text-white and hover:text-blue-600! */
}
/* BETTER: Inside the appropriate layer */
@layer components {
.btn {
color: red; /* Can be overridden by utilities like text-white */
}
}Menggabungkan @layer dengan @apply
Arahan @layer dan @apply berfungsi bersama. Anda mentakrifkan lapisan, meletakkan kelas komponen atau utiliti di dalamnya dan menggunakan @apply dalam kelas tersebut untuk menggabungkan utiliti Tailwind. Gabungan ini memberikan manfaat penyusunan lapisan (kaskad yang boleh dijangka) serta kemudahan @apply (menggabungkan utiliti sedia ada) dalam satu corak.
@layer base {
/* Element defaults using @apply */
body { @apply font-sans antialiased text-base leading-relaxed; }
}
@layer components {
/* Component classes using @apply */
.alert { @apply flex items-start gap-3 p-4 rounded-lg border text-sm; }
.alert-error { @apply alert bg-red-50 border-red-200 text-red-800; }
}
@layer utilities {
/* Custom utilities using plain CSS */
.touch-action-none { touch-action: none; }
.will-change-transform { will-change: transform; }
}Menstrukturkan Fail CSS dengan Lapisan
Apabila projek anda berkembang, pecahkan CSS kepada beberapa fail yang disusun mengikut tujuan lapisan. Import semuanya ke dalam satu fail masukan. Pastikan gaya asas minimum — hanya perkara yang benar-benar digunakan secara global. Susun fail komponen mengikut jenis komponen. Gunakan fail utiliti untuk utiliti yang benar-benar tiada. Struktur ini memudahkan pembangun baharu menyesuaikan diri dan mengelakkan CSS menjadi beban penyelenggaraan.
/* src/styles/main.css — entry point */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Base layer additions */
@layer base {
@import './base/typography.css';
@import './base/reset.css';
}
/* Component layer */
@layer components {
@import './components/buttons.css';
@import './components/cards.css';
@import './components/forms.css';
}
/* Utility layer additions */
@layer utilities {
@import './utilities/layout.css';
@import './utilities/animations.css';
}Menyahpepijat Isu Lapisan
Apabila gaya tidak digunakan seperti yang dijangka, buka Chrome DevTools dan lihat panel Styles. Pengisytiharan yang dipangkah menunjukkan gaya yang telah diatasi. Jika kelas utiliti dipangkah oleh CSS komponen anda sendiri, kemungkinan besar anda meletakkannya di luar lapisan (memberikannya keutamaan kaskad yang lebih tinggi) atau dalam lapisan yang salah. Memindahkannya ke @layer components sepatutnya memulihkan tingkah laku utiliti-menang yang betul.
Semakan Pantas
Uji pemahaman anda tentang penyusunan CSS tersuai dengan arahan @layer Tailwind.
Ringkasan Pelajaran
Dalam pelajaran ini, anda telah mempelajari perkara berikut: tiga lapisan Tailwind — base, components, utilities — membentuk hierarki kaskad yang setiap lapisan kemudian mengatasi lapisan terdahulu; @layer base digunakan untuk lalai elemen; @layer components untuk kelas komponen yang diekstrak; dan @layer utilities untuk kelas utiliti tersuai. Seterusnya, kita akan meneroka perangkap @apply dan masa yang sesuai untuk menggunakan pengekstrakan komponen.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “Menyusun CSS Tersuai dengan Lapisan” percuma?
Ya — teks penuh “Menyusun CSS Tersuai dengan Lapisan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Tailwind CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus Tailwind CSS Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menyusun CSS Tersuai dengan Lapisan”?
Gunakan @layer base, @layer components dan @layer utilities untuk mengawal kekhususan serta memastikan gaya tersuai disepadukan dengan betul ke dalam output Tailwind. Anda berlatih Tailwind CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Tailwind CSS Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Tailwind CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.
Berapa lamakah pelajaran “Menyusun CSS Tersuai dengan Lapisan” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Fungsi @apply dan Masa Menggunakannya
- Mencipta Kelas Komponen Boleh Guna Semula
- Menyusun CSS Tersuai dengan Lapisan
- Perangkap dan Alternatif @apply