Bersedia untuk Tailwind v

Ditulis oleh Oscar Jite-Orimiono✏️

Perkataan "tailwind" secara literal bermaksud angin yang bertiup ke arah yang sama dengan pergerakan kapal terbang atau bot. Ia membantu objek bergerak dengan lebih pantas dan sampai ke destinasinya dengan lebih cepat, memastikan kelajuan dan kecekapan.

Tailwind CSS ialah rangka kerja yang mengutamakan utiliti yang membolehkan anda "membina tapak web moden dengan pantas tanpa meninggalkan HTML anda." Ini bukan secawan teh setiap pembangun, tetapi Tailwind CSS telah mendapat populariti yang ketara sejak dikeluarkan pada 2019.

Hari ini, anda mungkin akan menjumpai Tailwind CSS disenaraikan bersama nama yang telah ditetapkan seperti Bootstrap dan Bulma apabila anda mencari "Rangka kerja CSS [masukkan nombor] teratas."

Artikel ini akan menyediakan pratonton dan analisis mendalam bagi versi seterusnya, Tailwind v4.0. Kami akan merangkumi strategi untuk memindahkan projek sedia ada dan contoh yang menunjukkan ciri baharu Tailwind v4.0. Kami juga akan membandingkannya dengan rangka kerja CSS yang serupa dan meneroka faedah dan had penggunaan rangka kerja ini.

Bermula dengan Tailwind v4.0

Tailwind v4.0 telah dibangunkan selama beberapa bulan dan versi beta awam pertama telah dikeluarkan pada November 2024.

Untuk mendapatkan maklumat yang lebih terperinci, anda boleh melawati dokumentasi prakeluaran, tetapi panduan ini akan menyerlahkan beberapa ciri baharu dan menarik yang boleh diharapkan oleh pembangun dalam Tailwind CSS v4.0

Enjin prestasi baharu

Pasukan Tailwind mengumumkan enjin prestasi baharu, Tailwind Oxide, pada Mac 2024. Beberapa faedah termasuk rantai alat bersatu dan konfigurasi yang dipermudahkan untuk mempercepatkan proses binaan.

Konfigurasi CSS-pertama

Dengan versi Tailwind semasa, fail tailwind.config.js membolehkan anda mengatasi token reka bentuk lalai Tailwind. Ia adalah hab penyesuaian yang membolehkan anda menambah kelas dan tema utiliti tersuai, melumpuhkan pemalam dan banyak lagi.

Fungsinya yang paling penting ialah mentakrifkan sumber kandungan untuk projek anda supaya Tailwind boleh mengimbas nama kelas utiliti yang berkaitan dan menghasilkan output yang betul.

Berikut ialah kod lalai untuk fail tailwind.config.js semasa menyediakan projek baharu dengan Tailwind v3:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Arahan yang dialih keluar

Selepas menyediakan fail konfigurasi, langkah seterusnya melibatkan penambahan arahan Tailwind pada fail index.css.

Ini ialah arahan dalam Tailwind v3:

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

Dalam Tailwind v4, anda tidak memerlukan fail tailwind.config.js dan arahan @tailwind. Anda hanya perlu mengimport "tailwindcss" ke dalam fail CSS utama anda dan anda boleh pergi:

@import "tailwindcss";

Ini mengurangkan bilangan langkah semasa menyediakan projek baharu dan bilangan fail.

Anda masih boleh menggunakan fail konfigurasi JS, contohnya, jika anda sudah mempunyai projek v3 sedia ada, dengan menggunakan arahan @config baharu untuk memuatkannya dalam fail CSS anda:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Walau bagaimanapun, bukan setiap ciri, seperti corePlugins, penting dan pemisah, mungkin akan disokong dalam keluaran v4.0 penuh. Sesetengah pilihan, seperti senarai selamat mungkin kembali dengan perubahan dalam tingkah laku.

Pengesanan sumber

Jika terdapat fail yang anda tidak mahu sertakan, anda boleh menggunakan fungsi source() apabila mengimport Tailwind untuk mengehadkan pengesanan automatik:

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

Untuk sumber tambahan yang tidak dikesan oleh Tailwind secara lalai, seperti apa-apa sahaja dalam fail .gitignore anda, anda boleh menambahkannya menggunakan arahan @source:

@import "tailwindcss";

Anda juga boleh melumpuhkan pengesanan sumber sepenuhnya:

@import "tailwindcss";

@config "../../tailwind.config.js";

Melumpuhkan prapenerbangan

Anda boleh mengimport lapisan individu tertentu yang anda perlukan untuk projek anda dan melumpuhkan gaya asas Tailwind:

@import "tailwindcss" source("../src");

Menyesuaikan tema

Pendekatan CSS-first baharu menjadikan penambahan penggayaan tersuai pada projek Tailwind anda lebih mudah. Sebarang penyesuaian akan ditambah terus ke fail CSS utama dan bukannya fail konfigurasi JavaScript.

Jika, sebagai contoh, anda ingin mengkonfigurasi warna baharu untuk tema tersuai dalam Tailwind CSS v3, anda perlu mentakrifkan kelas utiliti baharu dalam bahagian tema fail tailwind.config.js.

Begini cara anda melakukannya dalam fail konfigurasi JavaScript:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Begini cara anda menambah kelas pada fail HTML anda:

@import "tailwindcss" source(none);

Dalam contoh ini, kelas utiliti ialah bg-background, text-light dan text-lilac.

Dalam Tailwind CSS v4.0, anda mengkonfigurasi semua penyesuaian anda dalam CSS dengan arahan @theme baharu:

@layer theme, base, components, utilities;
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

Kelas utiliti kemudiannya ditambahkan pada HTML. Anda boleh memilih untuk mempunyai warna berbeza dengan warna yang sama seperti warna Tailwind lalai:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        background:'#764abc',
        lilac: '#eabad2',
        light: '#eae3f5'
      }
    },
  },
  plugins: [],
}

Jika anda mengujinya dengan Kod VS, arahan @import mungkin diserlahkan sebagai ralat tetapi jangan risau, arahan itu akan berfungsi dengan baik.

Perhatikan bahawa contoh di atas telah dibuat dengan Tailwind CSS dan React, oleh itu sebab kami mempunyai className dalam HTML dan bukan kelas. Utiliti kekal sama tidak kira rangka kerja yang anda gunakan.

Pembolehubah tema

Daripada contoh sebelumnya, anda boleh melihat bahawa pembolehubah CSS memacu semua penggayaan tema dalam Tailwind v4.0:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dalam v4.0, anda boleh mengatasi ruang nama tema tertentu — iaitu, utiliti lalai untuk warna, fon, teks dan banyak lagi, atau keseluruhan tema Tailwind dan konfigurasikan tema anda sendiri. Anda boleh mengkonfigurasi penggayaan tersuai dengan mudah untuk setiap utiliti Tailwind dalam fail CSS utama: Untuk mengatasi keseluruhan tema lalai, gunakan --*: initial. Jika anda ingin mengatasi fon Tailwind lalai dan menentukan sendiri, anda akan menggunakan --font-*: parap diikuti dengan penggayaan tersuai anda:

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

Dalam kes ini, paparan fon akan menjadi satu-satunya utiliti keluarga fon yang tersedia dalam projek anda.

Anda boleh menetapkan penggayaan lalai untuk sifat tersuai menggunakan tanda sempang dua kali. Berikut ialah halaman dengan penggayaan fon dan teks Tailwind CSS lalai: Berikut ialah penanda HTML untuk halaman ini:

@import "tailwindcss";

Kami menggunakan warna tersuai daripada contoh terdahulu dan mengkonfigurasi fon dan penggayaan teks baharu:

@import "tailwindcss";

@config "../../tailwind.config.js";

Dalam contoh ini, kami mengimport dua fon dan menyimpannya di bawah pembolehubah --font-display dan --font-logo, untuk digunakan untuk logo dan pengepala h1. Kami juga mengkonfigurasi saiz teks baharu dan penggayaan lalai untuk kedua-duanya.

Jadi, apabila anda menambah logo teks kelas utiliti dalam HTML anda, elemen tersebut akan mempunyai saiz fon 1.5rem dan berat fon 700 secara lalai. Begitu juga, mana-mana elemen dengan nama kelas, text-big, akan mempunyai saiz fon 6rem, berat fon 700 dan jarak huruf -0.025em secara lalai.

Kini kami menambah kelas utiliti baharu ke dalam fail HTML:

@import "tailwindcss" source("../src");

Berikut ialah tangkapan skrin halaman dengan penggayaan tersuai: Dalam Tailwind v4.0, akan terdapat kurang pergantungan pada nilai Tailwind lalai kerana berbilang kelas boleh digantikan dengan satu utiliti tersuai. Dalam contoh kami, nama kelas teks besar menggantikan kelas utiliti teks-5xl dan teks tebal untuk pengepala h1.

Sekali lagi, ini tidak terhad kepada ruang nama tertentu — anda boleh melakukan ini dengan setiap utiliti.

Konfigurasi tema yang dipermudahkan

Sesetengah utiliti tidak lagi berdasarkan konfigurasi tema anda dalam Tailwind v4.0. Anda akan dapat menentukan dengan tepat apa yang anda mahu secara langsung dalam fail HTML anda tanpa konfigurasi tambahan.

Dalam Tailwind v3, anda perlu menentukan bilangan lajur dalam fail tailwind.config.js anda, tetapi dalam Tailwind v4.0 anda boleh menggunakan sebarang nombor dari sekecil grid-cols-5 hingga sebesar grid-cols-73. Ia juga digunakan pada utiliti indeks-z (contohnya, z-40) dan kelegapan-*.

Tailwind v4.0 juga mempunyai sokongan terbina dalam untuk varian seperti data-*. Anda boleh menggunakannya tanpa nilai sewenang-wenangnya.

Faedah utama perubahan ini ialah pembangun akan dapat menghabiskan lebih sedikit masa mengkonfigurasi token reka bentuk yang tidak penting atau bukan teras.

Skala jarak dinamik

Utiliti jarak, seperti m-*, w-*, mt-*, px-* dan banyak lagi, dijana secara dinamik menggunakan nilai jarak asas 0.25rem yang ditakrifkan dalam Tailwind v4 lalai. 0 tema.

Setiap gandaan nilai jarak asas tersedia dalam skala jarak. Jadi jika mt-1 ialah 0.25rem, mt-2 akan menjadi 0.25rem didarab dengan dua, iaitu 0.5rem, dan mt-21 akan menjadi 5.25rem:

Anda boleh menggunakan utiliti jarak dengan nilai yang tidak ditakrifkan dengan jelas. Dalam Tailwind v3, anda perlu menggunakan nilai arbitrari seperti mt-[5.25rem] atau tema tersuai. Tidak perlu konfigurasi tambahan dan anda boleh membuat reka bentuk yang lebih konsisten.

Jika anda ingin mengehadkan nilai jarak yang tersedia, anda boleh melumpuhkan pembolehubah lalai dan menentukan skala tersuai:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dengan persediaan ini, setiap utiliti jarak Tailwind hanya akan menggunakan nilai yang ditentukan secara khusus.

Palet warna dikemas kini

Tailwind v4 beralih daripada palet warna rgb lalai kepada oklch, yang membolehkan warna lebih terang dan kurang terhad daripada rgb:

Sokongan pertanyaan kontena

Pertanyaan kontena kini mempunyai sokongan terbina dalam dalam Tailwind CSS v4.0; anda tidak memerlukan pemalam @tailwindcss/container-queries untuk mencipta bekas responsif.

Pertanyaan bekas digunakan untuk menggunakan penggayaan pada elemen berdasarkan saiz bekas induknya. Ini bermakna reka letak tapak anda menyesuaikan diri dengan komponen individu dan bukannya keseluruhan port pandangan.

Dalam v4.0, anda membuat pertanyaan kontena dengan menambahkan utiliti @container pada elemen induk. Untuk elemen kanak-kanak, anda menggunakan utiliti responsif seperti @sm dan @lg untuk menggunakan penggayaan berdasarkan saiz ibu bapa:

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

Tailwind v4.0 juga memperkenalkan varian @max-* baharu untuk pertanyaan bekas lebar maksimum. Ia memudahkan untuk menambah penggayaan apabila bekas berada di bawah saiz tertentu. Anda boleh menggabungkan @min-* dan @max-* untuk menentukan julat pertanyaan kontena:

@import "tailwindcss";

Dalam kod ini, div anak akan disembunyikan apabila lebar bekas induk berada di antara md dan xl (768px dan 1280px).

Kes penggunaan untuk pertanyaan kontena termasuk navigasi, bar sisi, kad, galeri imej dan teks responsif. Ia juga memberikan lebih fleksibiliti dan disokong dengan baik merentas penyemak imbas, jadi anda boleh mula menggunakannya dalam projek v4.0 anda.

Berhijrah daripada v3 kepada Tailwind CSS v4.0

Jika anda ingin menaik taraf projek v3 kepada v4, Tailwind telah menyediakan alat naik taraf untuk melakukan kebanyakan kerja untuk anda. Untuk menaik taraf projek anda, jalankan arahan berikut:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Alat naik taraf akan mengautomasikan beberapa tugas seperti mengemas kini kebergantungan, memindahkan fail konfigurasi JS anda kepada CSS dan mengendalikan perubahan dalam fail templat anda.

Tailwind mengesyorkan menggunakan cawangan baharu untuk naik taraf, untuk memastikan cawangan utama anda utuh dan menyemak perbezaan dengan teliti. Menjalankan arahan git diff membantu anda melihat dan memahami perubahan dalam projek anda. Anda juga ingin menguji projek anda dalam penyemak imbas untuk mengesahkan semuanya berfungsi sebagaimana mestinya.

Projek kompleks mungkin memerlukan anda membuat pelarasan manual, dan Tailwind telah menggariskan perubahan utama serta cara menyesuaikannya, yang akan kami bincangkan di bawah.

Perubahan kebergantungan

Pemalam PostCSS: Dalam v4.0, pemalam PostCSS kini tersedia sebagai pakej khusus, @tailwindcss/postcss. Anda boleh mengalih keluar postcss-import dan auto-prefixer daripada fail postcss.config.mjs dalam projek sedia ada anda:

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

Jika anda memulakan projek baharu, anda kini boleh memasang Tailwind bersama pemalam PostCSS dengan menjalankan arahan berikut:

@import "tailwindcss";

Pemalam Vite: Tailwind CSS v4.0 juga mempunyai pemalam Vite khusus baharu, yang mereka syorkan anda berhijrah dari pemalam PostCSS:

@import "tailwindcss";

@config "../../tailwind.config.js";

Seperti yang telah kita lihat dengan PostCSS, anda boleh memasang v4.0 bersama-sama dengan pemalam Vite apabila menyediakan projek baharu:

@import "tailwindcss" source("../src");

Tailwind CLI: Menggunakan alat CLI ialah cara termudah dan terpantas untuk menyediakan Tailwind CSS, dan ia kini berada dalam pakej @tailwind/cli khusus. Anda perlu mengemas kini arahan binaan anda dengan sewajarnya:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Utiliti ditamatkan

Beberapa utiliti lapuk atau tidak berdokumen telah dialih keluar dan digantikan dengan alternatif moden:

Mengkonfigurasi utiliti kontena

Dalam v4.0, anda mengkonfigurasi utiliti kontena dengan @utility:

@import "tailwindcss" source(none);

Pilihan konfigurasi seperti tengah dan padding tidak wujud dalam v4.0.

Perubahan skala lalai

Pelarasan skala lalai telah dibuat pada setiap utiliti bayangan, kabur dan jejari sempadan, untuk memastikan ia mempunyai nilai yang dinamakan: Anda perlu menggantikan setiap utiliti dalam projek anda untuk memastikan perkara itu tidak nampak lain.

Perubahan warna sempadan lalai

Dalam v3, warna jidar lalai ialah kelabu-200. Anda tidak perlu menetapkan warna secara eksplisit apabila menggunakan utiliti sempadan:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Dalam Tailwind CSS v4, warna jidar dikemas kini kepada currentColor dan projek semasa anda mungkin mengalami perubahan visual jika anda tidak menyatakan warna di mana-mana sahaja anda menggunakan utiliti sempadan.

Berikut ialah warna sempadan lalai dalam v4.0: Untuk mengekalkan gelagat lalai v3, anda boleh menambah baris CSS ini pada projek anda:

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

Perubahan lebar gelang lalai

Utiliti dering menambah dering 3px dalam v3, tetapi ia lalai kepada 1px dalam v4. Gantikan sebarang penggunaan utiliti cincin dengan cincin-3 apabila mengemas kini projek anda untuk mengekalkan penampilannya.

Perubahan pemegang tempat lalai

Dalam v4, teks pemegang tempat akan menggunakan warna teks semasa pada kelegapan 50% secara lalai. Ia menggunakan warna kelabu-400 dalam v3, dan jika anda ingin mengekalkan tingkah laku ini, tambahkan ini pada CSS anda:

@import "tailwindcss";

Perubahan garis besar

Juga dalam v4, utiliti outline-none tidak menambah rangka 2px lutsinar seperti yang dilakukan dalam v3. Terdapat utiliti tersembunyi garis besar baharu dalam v4 yang berkelakuan seperti garis besar-tiada daripada v3.

Apabila menaik taraf projek anda, anda perlu menggantikan outline-none dengan outline-hidden untuk mengekalkan keadaan semasanya, kecuali anda mahu mengalih keluar garis besar sepenuhnya.

Menambah utiliti tersuai

Utiliti tersuai kini berfungsi dengan API @utility baharu dan bukannya utiliti @layer. Perubahan ini memastikan keserasian dengan lapisan lata asli.

Mereka kini hanya nama kelas tunggal dan bukan lagi pemilih yang kompleks:

@import "tailwindcss";

@config "../../tailwind.config.js";

Menyusun varian sensitif pesanan

Tailwind v4.0 menyusun varian seperti pertama dan terakhir dari kiri ke kanan, jadi anda perlu memesan varian dalam projek anda.

Pembolehubah CSS dalam nilai arbitrari

Sintaks untuk pembolehubah dalam nilai arbitrari telah berubah daripada kurungan segi empat sama kepada kurungan untuk mengelakkan kesamaran dengan piawaian CSS baharu. Anda perlu mengemas kini perkara ini dalam projek anda:

@import "tailwindcss" source("../src");

Menggunakan fungsi theme().

Tailwind CSS v4.0 menjana pembolehubah untuk semua nilai tema jadi fungsi theme() tidak diperlukan. Tailwind mengesyorkan agar semua fungsi theme() dalam projek anda digantikan dengan pembolehubah CSS di mana mungkin:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib/src/components";

Untuk mendapatkan butiran lanjut tentang perubahan yang datang dalam Tailwind v4.0, anda harus melawati dokumentasi prakeluaran.

Tailwind dan rangka kerja CSS alternatif

Alternatif yang paling jelas kepada Tailwind CSS ialah Bootstrap, rangka kerja CSS paling popular di dunia. Ia mempunyai perpustakaan komponen yang dipratentukan yang luas.

Bootstrap mungkin lebih mesra pemula daripada CSS Tailwind. Anda boleh mencipta komponen sedia untuk digunakan menggunakan nama kelas yang khusus dan mudah. Tailwind memerlukan anda memahami utiliti dan peraturan CSS asasnya.

Satu lagi kelebihan Bootstrap berbanding CSS Tailwind ialah ia termasuk JavaScript secara lalai, jadi anda boleh melakukan lebih banyak perkara bahagian belakang. CSS Tailwind perlu digabungkan dengan rangka kerja JS.

Walau bagaimanapun, Bootstrap tidak boleh disesuaikan atau sefleksibel seperti Tailwind CSS. Hujah yang telah lama wujud ialah semua tapak Bootstrap kelihatan sama. Dengan pendekatan mengutamakan utiliti, Tailwind menawarkan lebih fleksibiliti dan kawalan.

Keburukan CSS Tailwind

Lebih banyak rangka kerja CSS yang mengutamakan utiliti telah muncul sejak beberapa tahun kebelakangan ini, seperti missing.css dan Mojo CSS. Tiada seorang pun yang dapat merebut mahkota daripada Tailwind, tetapi itu bukan bermakna ia bukan tanpa hadnya yang saksama:

Keluk pembelajaran yang curam: Seperti yang dinyatakan sebelum ini, pendekatan mengutamakan utiliti dan bilangan kelas yang banyak mungkin sukar untuk dipelajari oleh pemula.

Kebolehbacaan kod: Oleh kerana anda bekerja terutamanya dalam fail HTML anda, kod itu boleh menjadi sukar dibaca kerana setiap elemen mengumpul utiliti.

Reka bentuk yang tidak konsisten: Fleksibiliti Tailwind CSS boleh membawa kepada reka bentuk yang tidak konsisten merentas projek jika anda tidak mengambil berat.

Menukar rangka kerja: Projek boleh digabungkan dengan ketat dengan Tailwind CSS, menjadikannya sukar untuk beralih kepada rangka kerja lain.

Beralih kepada Tailwind CSS v4.0

Menaik taraf projek sedia ada anda kepada versi baharu Tailwind mungkin kelihatan seperti tugas yang sukar, dan ini benar jika anda mempunyai projek yang rumit, tetapi faedahnya berbaloi. Tailwind menjadikan segala-galanya lebih pantas dan mudah dengan mengalih keluar alatan dan fail tambahan serta menyediakan sintaks yang lebih jelas.

---

Adakah bahagian hadapan anda memonopoli CPU pengguna anda?

Memandangkan bahagian hadapan web semakin kompleks, ciri rakus sumber menuntut lebih banyak lagi daripada penyemak imbas. Jika anda berminat untuk memantau dan menjejaki penggunaan CPU pihak pelanggan, penggunaan memori dan banyak lagi untuk semua pengguna anda dalam pengeluaran, cuba LogRocket.

LogRocket adalah seperti DVR untuk web dan apl mudah alih, merakam semua yang berlaku dalam apl web, apl mudah alih atau tapak web anda. Daripada meneka sebab masalah berlaku, anda boleh mengagregat dan melaporkan metrik prestasi bahagian hadapan utama, memainkan semula sesi pengguna bersama-sama dengan keadaan aplikasi, log permintaan rangkaian dan secara automatik memaparkan semua ralat.

Modenkan cara anda menyahpepijat web dan apl mudah alih — mula memantau secara percuma.

Atas ialah kandungan terperinci Bersedia untuk Tailwind v. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!