Adam Wathan (sangat bijak) melaksanakan tailwind menggunakan lapisan CSS Cascade, yang menjadikannya sangat berkesan untuk menguruskan gaya berdasarkan keutamaan.

 <code>@layer theme, base, components, utilities; @import 'tailwindcss/theme.css' layer(theme); @import 'tailwindcss/utilities.css' layer(utilities);</code>

Asas Tailwind terletak di kelas utilitinya. Ini bermakna anda mempunyai dua pilihan:

1. Pilihan standard
2. Pilihan yang tidak konvensional

Pilihan standard

Pendekatan yang disyorkan TailWind adalah untuk mengatur susunan lapisan dengan meletakkan komponen pertama dan utiliti terakhir.

Oleh itu, apabila membina komponen yang boleh diguna semula, anda perlu membungkusnya secara manual di dalam arahan @layer. Kemudian, gunakan utiliti tailwind untuk mengatasi gaya komponen anda, dengan berkesan merawat tailwind sebagai "lapisan yang paling penting".

 <code>/* Define your components */ @layer components { .component { /* Your custom CSS here */ } }</code>

 <code>...</code>

Itulah cara yang kukuh untuk menguruskan sesuatu.

Tetapi, sebagai jenis pemberontak saya, saya tidak selalu berpegang pada kaedah lalai. Selepas lebih setahun percubaan berat dengan CSS dan CSS asli, saya dapati apa yang saya percaya adalah pendekatan yang lebih baik.

Pilihan yang tidak konvensional

Sebelum kita meneruskan, saya harus menyebut bahawa saya sedang menulis kursus berjudul Unorthodox Tailwind - ia meliputi semua yang saya tahu tentang menggabungkan Tailwind dan CSS dengan cara yang berkuasa, menarik dari kekuatan kedua -duanya.

Dengan palam yang tidak tahu malu itu, mari kita meneroka pilihan yang tidak konvensional.

Dalam kes ini, pendekatan alternatif melibatkan penulisan CSS anda dalam lapisan yang tidak dinamakan - atau mana -mana lapisan yang datang selepas utiliti - supaya gaya anda secara semula jadi menimpa kelas utiliti tailwind.

Daripada jumlah ini, saya secara peribadi lebih suka kaedah lapisan yang tidak dinamakan:

 <code>/* Using an unnamed layer */ @layer theme, base, components, utilities;</code> / <em>Tulis CSS anda secara langsung di sini</em> / 
.component { / <em>...</em> /}

 <code>/<em> Or using a named layer</em> / /<em> You can choose any name. Here I used "css" for clarity</em> / @layer theme, base, components, utilities, css;</code><p> @layer CSS {
.component { / <em>...</em> /}
}</p>

Berikut adalah beberapa sebab mengapa saya melakukan ini:

1. Saya mengelakkan menambah lapisan tambahan melainkan benar -benar diperlukan - ia mengurangkan ketukan kekunci dan overhead mental.
2. Saya selesa dengan ITCSS, kekhususan pemilih, dan teknik front-end klasik yang lain, jadi pengendalian CSS dalam satu lapisan terasa semula jadi.
3. Saya boleh mengendalikan tugas -tugas yang kompleks seperti tema dan animasi dalam CSS tulen, yang akan menjadi sukar atau mustahil dengan tailwind sahaja.

Pengalaman anda mungkin berbeza, tentu saja.

Sekarang, jika anda telah mengikuti logik saya setakat ini, anda akan melihat bahawa saya menggunakan tailwind sangat berbeza:

• Utiliti Tailwind bukan lapisan "keutamaan tertinggi".
• Lapisan CSS tersuai saya diutamakan.

Ini membolehkan saya:

• Prototaip dengan cepat dengan tailwind (dengan cepat dan cekap, terutamanya dengan alat yang saya bina).
• Gerakkan gaya kompleks ke dalam CSS apabila mereka menjadi terlalu rumit - mengelakkan HTML berantakan yang dipenuhi dengan kelas utiliti yang membuat perut saya berubah. Tidak kerana utiliti-pertama HTML sememangnya buruk, tetapi kerana ia memerlukan lebih banyak usaha kognitif untuk mengurai.

Dan inilah manfaat yang kemas untuk mempunyai tailwind dalam lapisan utiliti: Saya sentiasa boleh memohon! Penting untuk kelas utiliti untuk meningkatkan kekuatannya.

 <code>...</code>

Tunggu sebentar! Bukankah itu tidak betul?

Tidak betul -betul. Secara sejarah, penting telah digunakan untuk mengatasi peraturan kelas. Dalam senario ini, kami mengambil kesempatan daripada ciri penting dalam lapisan CSS untuk meningkatkan utiliti tailwind di atas mana -mana CSS dalam lapisan yang tidak dinamakan.

Tingkah laku ini benar -benar sah dan merupakan sebahagian daripada spesifikasi lapisan CSS.

Lebih -lebih lagi, sejak! Penting adalah eksplisit dan sepertinya digunakan, ia berfungsi dengan baik untuk mengatasi cepat tanpa perlu membuat pemilih yang baru.

Utiliti tailwind lebih serba boleh daripada yang muncul

Utiliti Tailwind bukan sekadar pemetaan satu sama lain antara kelas dan harta CSS. Kebanyakan kelihatan seperti itu untuk kesederhanaan, yang mungkin membawa kepada salah faham.

Utiliti Tailwind berfungsi lebih seperti campuran sass yang mudah, yang bermaksud kita boleh membina alat yang mantap untuk susun atur, tema, tipografi, dan banyak lagi melalui mereka.

Anda boleh meneroka idea -idea canggih ini dalam tailwind unorthodox .

Terima kasih kerana membaca, dan saya harap ini membuka perspektif yang baru mengenai bagaimana anda berfikir tentang (atau menggunakan) tailwind!

Atas ialah kandungan terperinci Menggunakan lapisan cascade CSS dengan utiliti tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!