Saya telah salah menggunakan Tailwind, jadi anda tidak perlu melakukannya-tutorial js-php.cn

Kira-kira 3 tahun yang lalu saya menemui Tailwind CSS, perpustakaan yang hebat untuk pembangunan tapak web. Untuk memastikan artikel ini ringkas, saya tidak akan membuang kata-kata untuk memperkenalkannya. Terdapat banyak sumber untuk belajar daripada sudah. Sebaliknya, saya ingin berkongsi cerita tentang kesilapan yang saya lakukan semasa awal saya bersama Tailwind. Tidak perlu jatuh ke lubang yang sama seperti saya.

Tailwind menghancurkan konsep tradisional helaian gaya lata dengan membungkus peraturan CSS ke dalam apa yang dipanggil kelas utiliti. Daripada mengarang peraturan CSS dalam fail .css, anda mengarang nama kelas terus pada elemen DOM. Walaupun pendekatan ini terasa tidak wajar dan pelik pada mulanya, ia mula masuk akal dengan cepat. Saya mengambil masa kira-kira satu hari untuk melakukannya dan sekarang saya tidak mahu menulis CSS biasa lagi, melainkan saya terpaksa melakukannya. Tailwind disepadukan dengan lancar ke dalam rangka kerja #1 saya Nuxt dan kesederhanaan mencipta tapak web mesra responsif yang menarik secara visual dalam masa beberapa minit adalah hebat.

Ada tangkapan, walau bagaimanapun. Lebih banyak pilihan yang anda ketahui dan lebih banyak gaya yang anda pilih untuk disertakan, HTML boleh menjadi huru-hara. Masalah kedua yang saya rasa pada hari-hari awal saya adalah berulang. Sebagai pengikut prinsip DRY yang mulia, saya sakit mata melihat urutan kelas yang sama beberapa kali dalam templat saya.

Saya cuba mengoptimumkan ini.

Idea pertama adalah untuk mengekstrak urutan kelas Tailwind sebagai pembolehubah rentetan. Dalam Vue.js (Nuxt dibina di atas Vue), ia kelihatan lebih kurang seperti ini.

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

Salin selepas log masuk

Akhirnya, ia lebih mudah untuk diselenggara dan diubah. Kejelasan boleh dipertikaikan. Terutamanya jika anda mempunyai elemen yang sama di sekeliling apl anda dan anda perlu menaikkan takrifan ke beberapa pemalar seperti global.

Saya sedang mencari lebih jauh untuk penyelesaian yang lebih baik.

Dan saya telah diperkenalkan dengan arahan @apply Tailwind. Pada asasnya, ia seperti penafian keseluruhan konsep. Daripada meletakkan definisi secara langsung pada elemen konkrit, anda boleh membuat lembaran gaya anda sendiri dan mengisinya dengan kelas tersuai dan pelarasan elemen. Hanya daripada peraturan CSS biasa, anda menghasilkan penyelesaian daripada kelas utiliti Tailwind.

Pelik, tetapi nampaknya ia akan menyelesaikan masalah mental saya dengan definisi pendua.

Saya telah diberi amaran oleh tutor VueSchool dan dokumen Tailwind TIDAK untuk menggunakannya, tetapi sememangnya saya tidak mendengarnya.

I was using Tailwind wrong, so you don

Saya mencipta beberapa tapak web menggunakan pendekatan ini. Ia berjaya. Masalah selesai, atau?

Maju ke lewat 2024. Saya mendapat beberapa idea baharu untuk salah satu tapak web saya. Saya mula mengekod. Saya benar-benar terlupa tentang @apply shenanigans yang saya lakukan lebih daripada setahun yang lalu. Dan tiba-tiba, saya mendapati diri saya tidak dapat menyusun susun atur saya.

Walaupun tiada gaya yang jelas digunakan dalam templat saya,

s saya berada di luar tempat. Apa yang sedang berlaku? Saya membuka konsol dev dalam penyemak imbas untuk mengkaji HTML yang diberikan. Terdapat gaya CSS digunakan pada mereka.

I was using Tailwind wrong, so you don

Beberapa saat yang mengecewakan kemudian saya mendapat pelakunya.

Tiba-tiba, mempunyai:

<-- component before -->
<template>
 <div>
  <button>





<pre class="brush:php;toolbar:false"><-- component after -->
<template>
 <div>
  <button :class="tailwindBtn">
    Button 1
  </button>
  <button :class="tailwindBtn">
    Button 2
  </button>
  <button :class="tailwindBtn">
    Button 3
  </button>
 </div>
</template>

<script setup lang="ts">
const tailwindBtn = "m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold"
</script>

Salin selepas log masuk

dalam fail tailwind.css nampaknya bukan idea yang bagus seperti pada tahun 2023.

Siapa patut tahu saya perlukan sesuatu yang lain suatu hari nanti, eh?

PELAJARAN #1

Jangan sekali-kali, jangan sekali-kali menggunakan @apply secara global pada pemilih elemen.

Walaupun ia mungkin kelihatan mudah apabila anda merangka projek baharu, ia boleh menggigit anda kembali dalam jangka masa panjang. Bukan sahaja anda boleh melupakannya dengan mudah seperti yang saya lakukan. Ia juga menjadikan perkara kurang fleksibel. Suatu hari anda akan kembali lebih bijak dan bersedia untuk menyingkirkannya - tetapi sebaik sahaja anda mengalih keluar gaya global, separuh daripada tapak yang diasaskan di atasnya secara tidak dijangka akan pecah. Adakah anda bersedia secara mental untuk memikirkan semula keseluruhan reka bentuk?

Secara peribadi, saya kini mengesyorkan untuk tidak menggunakan @apply dalam tailwind.css sama sekali (jika saya mempunyai masa dan kesabaran untuk merobeknya daripada semua projek saya di mana saya berjaya meletakkannya).

Jika anda masih berkeras untuk menggunakannya tanpa alasan yang munasabah ("suka mengatasi gaya dalam pustaka pihak ketiga" seperti yang dikatakan oleh dokumen Tailwinds), sekurang-kurangnya gunakannya untuk mencipta kelas .

Mempunyai beberapa .my-cool-css-class boleh dimaafkan, kerana sekurang-kurangnya anda perlu melampirkannya pada elemen yang anda ingin gayakan. Begitu juga, semua orang (termasuk diri masa depan anda) boleh melihatnya di sana dan akan dapat mencari definisinya jika perlu.

YA, TETAPI

Calon yang menggoda untuk melanggar peraturan ini adalah elemen utama. Kerana ia akan menjadi sangat membosankan jika perlu melampirkan atribut kelas pada setiap .

Satu alternatif yang mungkin ialah membuat komponen pautan tersuai yang membaluti sauh (atau sekitar terbina dalam dalam Nuxt). Tetapi anda mungkin tidak menyukainya dan saya tidak akan menyalahkan anda.

Malah, menggunakan arahan @apply masih merupakan penyelesaian teratas.

Mungkin anda boleh mengada-adakan lebih banyak contoh yang membolehkan gaya elemen global masuk akal. Jika anda pasti 100%, gunakannya. Tetapi ia harus sentiasa menjadi keputusan yang berasas.

PELAJARAN #2

Sebab sebenar anda mempunyai takrifan kelas Tailwind yang terlalu panjang / pendua ialah reka bentuk kod anda yang lemah.

Dengan rangka kerja JavaScript moden seperti Vue, anda dipersenjatai dengan keupayaan untuk mencipta komponen kecil boleh guna semula dan menggabungkannya untuk membina penyelesaian yang kompleks. Gunakannya.

Contoh butang dari atas boleh ditukar menjadi ini:

<-- MyButton.vue -->
<template>
  <butang>



<p>Dan seperti itu, kod pendua hilang.</p><p>Melihat rantai kelas yang sangat panjang sebaliknya sentiasa membuatkan saya berfikir bahawa elemen yang lemah itu dibebani dengan terlalu banyak kebimbangan. Perkara terbaik untuk dilakukan ialah berundur dan menyemak semula keputusan yang membawa anda ke sana.</p>

<p>Pengalaman saya ialah anda boleh mencipta reka bentuk yang menarik dengan hanya beberapa kelas Tailwind. Dan jika anda ingin menambah lebih banyak lagi, ia biasanya tidak sepatutnya bertimbun semua pada satu elemen sahaja. Ia hampir sama dengan mencipta satu komponen besar (atau kelas jika anda suka) melakukan segala-galanya. Pada satu ketika anda benar-benar perlu berhenti menambah lebih banyak baris dan mula memecahkan perkara.</p>

<p>Dalam senario terburuk, anda seharusnya dapat merangkum elemen CSS yang menuntut secara visual ke dalam komponen yang berasingan dan dengan itu meminimumkan jumlah interaksi yang diperlukan. Tetapi sejujurnya, seseorang mungkin sudah melakukannya dan anda hanya perlu mencari pustaka komponen Tailwind yang sesuai untuk digunakan dalam projek anda.</p>

Salin selepas log masuk

Atas ialah kandungan terperinci Saya telah salah menggunakan Tailwind, jadi anda tidak perlu melakukannya. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!