Kemas kini menarik dalam Tailwind v�

Beberapa bulan yang lalu (pada masa penulisan), Tailwind CSS menggunakan sumber terbuka kerjanya pada Tailwind CSS v4.0. (Anda boleh menemuinya di GitHub di sini).

Baru-baru ini, Tailwind mengumumkan beta awam untuk Tailwind CSS 4, dan dalam artikel ini saya akan membincangkan sorotan versi baharu. Jadi mari kita mulakan!

Perubahan Struktur Umum

Tailwind telah menjalani kerja semula enjinnya yang meningkatkan prestasi secara drastik. Binaan penuh sehingga 5x lebih pantas, binaan tambahan sehingga 100x (anda baca betul-betul) lebih pantas.

Tailwind v4 juga mempunyai rantai alat bersatu. Ingat perlu memasang autoprefixer dan postcss dalam semua projek Tailwind anda? Anda tidak perlu lagi!

Mengambil pendekatan yang menarik untuk konfigurasi, Tailwind beralih daripada fail konfigurasi JS ke konfigurasi CSS. Ini bermakna anda akan mengkonfigurasi pemalam, tema dan gelagat lain secara langsung dalam CSS anda.

Tailwind juga mendapat sokongan untuk ciri terbaharu dalam CSS.

CSS mempunyai logo baharu (dan ciri baharu)! ?

Kod Terbaik ・ 23 Nov

#css #webdev #pengaturcaraan #bincang

Sekarang, dengan perubahan umum yang akan berlaku, mari lihat apa yang khusus ditambahkan oleh Tailwind!

---

Ciri Baharu ?

Jika anda ingin mencuba Tailwind v4, lihat dokumen permulaan untuk v4 (beta).

Jika anda ingin menaik taraf projek anda dengan mudah, jalankan sahaja npx @tailwindcss/upgrade@next dan Tailwind akan melakukannya untuk anda. Berhati-hati! Mungkin terdapat perubahan yang tidak memuaskan.

warna

Palet warna Tailwind v4 adalah berdasarkan oklch dan bukannya rgb. Sistem warna RGB sedikit mengehadkan dari segi konsistensi merentas skrin dan keceriaan. Memandangkan sistem warna oklch kini disokong secara meluas, Tailwind v4 akan memanfaatkannya!

Pertanyaan bekas

Tailwind v4 kini menyokong pertanyaan kontena secara lalai. Jika anda tidak tahu apakah pertanyaan kontena, biar saya terangkan.

Anda tahu perkara dalam Tailwind seperti md:, sm:, dsb. yang membolehkan anda menyesuaikan CSS yang digunakan pada saiz skrin yang berbeza?
Dalam kes tersebut, kelas merujuk kepada saiz tetingkap. Dengan pertanyaan kontena, mereka boleh merujuk kepada saiz bekas.

<div>



<p>Dalam contoh di atas, grid akan mempunyai 3 lajur — bukan apabila <em>tetingkap</em> mencapai saiz kecil, tetapi apabila <em>bekas</em> itu. Seperti yang anda boleh bayangkan, ini sangat berguna dalam reka letak responsif.</p>

<h2>
  
  
  Saiz bidang
</h2>

<p>saiz medan bukanlah ciri CSS yang disokong secara universal, tetapi ia akan menjadi hebat apabila ianya! Daripada memerlukan JS untuk mencipta kawasan teks saiz semula automatik, anda boleh menggunakan CSS sahaja.<br>
Dan Tailwind v4 menyokongnya!</p>

<p>Cuba demo di tapak web Tailwind.<br>
Anda kini boleh menambah kelas kandungan saiz medan pada kawasan teks anda untuk menggunakannya.</p>
<h2>
  
  
  Kemas kini keturunan
</h2>

<p>Tailwind stable (anda mungkin tidak tahu ini) mempunyai varian * yang membolehkan anda menyasarkan <em>mengarahkan</em> kanak-kanak elemen dengan kelas. Contohnya:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Varian ** baharu dalam Tailwind v4 akan menyasarkan <em>semua keturunan</em>:<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<h2>
  
  
  Sisipkan bayang (dan gelang)
</h2>

<p>Kini juga mudah untuk mencipta bayang-bayang inset dan cincin pada elemen menggunakan kelas inset-shadow dan inset-ring.<br>
</p>

<pre class="brush:php;toolbar:false">butang<



<p><img src="https://img.php.cn/upload/article/000/000/000/173363689867865.jpg" alt="Exciting updates in Tailwind v�"></p>


<hr>

<h2>
  
  
  Ada banyak lagi!
</h2>

<p>Jika anda ingin melihat semua tambahan baharu, pergi ke https://tailwindcss.com/docs/v4-beta dan semaknya!</p><p>Siaran ini adalah siaran #bincang! Sebab itu saya pendekkan; Saya ingin tahu pendapat anda!<br>
Saya tahu ramai daripada anda yang membenci Tailwind mungkin akan mempunyai maklum balas untuk saya ?<br>
Pasti terdapat beberapa ciri baharu yang kontroversi dan saya ingin mendapatkan beberapa pendapat ?</p>

<p>Ringkasan: Tinggalkan ulasan!</p>


<hr>

<p>Terima kasih kerana membaca!<br>
Kod Terbaik</p>


          

            
        

Atas ialah kandungan terperinci Kemas kini menarik dalam Tailwind v�. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!