Ciri & Kemas Kini Baharu Tailwind Yang Perlu Anda Ketahui | Mbloging

tailwind CSS?
Ciri -ciri Baru Tailwind 4
tailwind 4 Bagaimana untuk memperbaiki proses pembangunan
Ringkasan
4. soalan yang sering ditanya
5. Pengenalan
pelepasan Tailwind 4 dalam komuniti pembangunan web telah menarik perhatian yang meluas. Dengan sistem pembinaannya yang cepat, fungsi CSS moden dan pilihan konfigurasi intuitif, Tailwind 4 menggabungkan kedudukannya sebagai salah satu kerangka CSS yang paling popular di dunia. Sekiranya anda ingin berada di barisan hadapan teknologi, versi ini akan meningkatkan pengalaman pembangunan web anda.

enjin jit yang tinggi -tinggi

Masa pembinaan super cepat: Tailwind 4 Untuk mengurangkan masa pembinaan dengan menghasilkan gaya hanya apabila diperlukan, dengan itu meningkatkan kelajuan pembinaan tambahan. Fail CSS yang lebih kecil: Kerana hanya menyusun kelas yang berguna, output CSS terakhir akan lebih kecil, menjadikan beban laman web anda lebih cepat.

Contoh Kod Contoh: Serpihan kod berikut menunjukkan kelas program praktikal TailWind menggunakan enjin JIT:

merangkul fungsi CSS moden

• Tailwind 4 menggunakan beberapa fungsi CSS yang tinggi untuk meningkatkan praktikal:
Lapisan Kelas: Tailwind kini menyokong

CSS Peraturan: Anda kini boleh menggunakan untuk mendaftarkan atribut tersuai (pembolehubah CSS) dalam jadual gaya, yang menjadikannya lebih mudah untuk melaksanakan tema dan gaya dinamik.

<div class="bg-blue-500 text-white p-4 rounded-lg">
  <p>在这个例子中，只有使用的实用程序类 (bg-blue-500, text-white, p-4, rounded-lg) 包含在最终构建中，使 CSS 文件保持最小化和优化。</p>
</div>

Fungsi, membolehkan pemaju untuk mencampurkan warna secara dinamik, dengan itu mencapai reka bentuk yang lebih maju dan disesuaikan. Contoh Kod Contoh:

berikut dalam pengurusan Tailwind 4:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  <p>在这个例子中，只有使用的实用程序类 (bg-blue-500, text-white, p-4, rounded-lg) 包含在最终构建中，使 CSS 文件保持最小化和优化。</p>
</div>

Dalam contoh ini, kami mentakrifkan kelas .btn yang menggunakan kelas utiliti, tetapi ia berada dalam lapisan components supaya ia mudah untuk disesuaikan.

Proses pemasangan dipermudahkan

Proses pemasangan untuk Tailwind 4 telah dipermudahkan:

• Konfigurasi sifar: Tailwind kini memerlukan persediaan minimum untuk dijalankan, jadi anda boleh bermula dengan cepat tanpa mengkonfigurasi sistem binaan yang kompleks.
• Penyepaduan yang lebih baik: Tailwind 4 disepadukan dengan lancar dengan alatan moden seperti Vite, Webpack dan PostCSS, menjadikan persediaan lebih pantas dan lebih mudah.

Contoh kod: Berikut ialah cara memasang Tailwind 4 dalam projek anda:

Pasang Tailwind melalui npm:

@layer components {
  .btn {
    @apply px-4 py-2 text-white bg-blue-500;
  }
}

Buat fail tailwind.config.js:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

Sertakan Tailwind dalam fail CSS:

npx tailwindcss init

Pemalam Tailwind 4 Vite

Pemalam Vite rasmi untuk Tailwind 4 memberikan kelajuan pembungkusan yang lebih pantas dan menjadikan pembangunan lebih lancar. Menggunakan pemalam Vite, pembangun boleh memanfaatkan ciri berikut:

• Penggantian Modul Panas Segera (HMR): Tailwind 4 dengan Vite memastikan perubahan anda segera ditunjukkan dalam penyemak imbas, mempercepatkan proses pembangunan.
• Prestasi binaan yang dioptimumkan: Pemalam Vite memastikan penyepaduan yang lancar, menghasilkan binaan yang lebih pantas dan gelung maklum balas yang lebih pantas.

Contoh kod: Begini cara mengkonfigurasi Tailwind 4 menggunakan Vite:

Pasang pemalam Vite:

@tailwind base;
@tailwind components;
@tailwind utilities;

Kemas kini profil Vite anda:

npm install vite-plugin-tailwind

Penyepaduan ini memastikan pembinaan yang lebih pantas dan meningkatkan proses pembangunan anda.

Pengesanan kandungan automatik dalam Tailwind 4

Tailwind 4 memperkenalkan pengesanan kandungan automatik, yang mengimbas fail projek anda secara automatik (HTML, JavaScript dan templat) dan hanya menjana gaya yang diperlukan.

• Kurangkan saiz fail CSS: Dengan memasukkan hanya gaya yang anda gunakan, Tailwind 4 mengurangkan saiz fail CSS, menjadikan halaman web anda dimuatkan dengan lebih cepat.
• Keperluan konfigurasi yang dikurangkan: Anda tidak perlu lagi menentukan laluan ke fail kandungan dalam fail konfigurasi secara manual - Tailwind 4 melakukan ini untuk anda.

Contoh Kod: Tailwind 4 secara automatik akan mengesan kelas kandungan yang anda gunakan dalam HTML anda dan hanya menjana CSS yang diperlukan. Tidak perlu menambah laluan secara manual pada setiap fail.

import { defineConfig } from 'vite';
import tailwind from 'vite-plugin-tailwind';

export default defineConfig({
  plugins: [tailwind()]
});

Konfigurasi keutamaan CSS dalam Tailwind 4

Dengan Tailwind 4, terdapat sistem konfigurasi keutamaan CSS baharu. Ini bermakna:

• Tentukan gaya dalam CSS: Anda kini boleh mentakrifkan penanda reka bentuk (seperti warna, jarak, dll.) terus dalam CSS, menjadikannya lebih mudah untuk mengurus dan menyesuaikan tema anda.
• Sifat tersuai: Tailwind 4 menyokong pembolehubah CSS tersuai, memberikan anda kawalan yang lebih besar ke atas penggayaan, tema dinamik dan kebolehskalaan.

Contoh kod: Gunakan pembolehubah CSS untuk menentukan penanda reka bentuk dalam fail konfigurasi Tailwind:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  <p>在这个例子中，只有使用的实用程序类 (bg-blue-500, text-white, p-4, rounded-lg) 包含在最终构建中，使 CSS 文件保持最小化和优化。</p>
</div>

Ini membolehkan anda menguruskan sistem reka bentuk dengan mudah dalam CSS dan memohon kepada kelas Tailwind anda.