من از Tailwind اشتباه استفاده می کردم، بنابراین شما مجبور نیستید

حدود 3 سال پیش با Tailwind CSS آشنا شدم، یک کتابخانه عالی برای توسعه وب سایت. برای کوتاه ماندن این مقاله، کلماتی را برای معرفی آن هدر نمی دهم. منابع زیادی برای یادگیری از قبل وجود دارد. در عوض، می‌خواهم داستانی درباره اشتباهی که در روزهای اولیه‌ام با Tailwind انجام می‌دادم به اشتراک بگذارم. نیازی نیست مثل من در گودالی بیفتیم.

باد دنباله مفهوم سنتی را در هم می شکند ورق های سبک آبشاری با قرار دادن قوانین CSS به اصطلاح کلاس های سودمند. به جای نوشتن قوانین CSS در .css فایل‌ها، نام کلاس‌ها را مستقیماً روی عناصر DOM می‌نویسید. در حالی که این رویکرد در ابتدا غیر طبیعی و عجیب به نظر می رسد، اما به سرعت شروع به ایجاد حس می کند. حدود یک روز طول کشید تا وارد آن شوم و حالا دیگر نمی‌خواهم CSS ساده بنویسم، مگر اینکه مجبور باشم. Tailwind به طور یکپارچه در چارچوب شماره 1 من Nuxt ادغام شده است و سادگی ایجاد وب‌سایت‌های واکنش‌پسند بصری جذاب در عرض چند دقیقه بسیار عالی است.

با این حال یک گرفتاری وجود دارد. هرچه گزینه‌های بیشتری بشناسید و سبک‌های بیشتری را انتخاب کنید، HTML می‌تواند به آشوب تبدیل شود. دومین مشکلی که در روزهای اول احساس کردم تکرار خودم بود. به عنوان یک پیرو محترم اصل DRY، دیدن چندین مرتبه یکسان از کلاس‌ها در قالب‌هایم چشمانم را آزار می‌داد.

من سعی کردم این را بهینه کنم.

ایده اول استخراج دنباله کلاس های Tailwind به عنوان یک متغیر رشته بود. در Vue.js (Nuxt در بالای Vue ساخته شده است)، تقریباً شبیه به این است.

<-- component before -->
<template>
 

   class="m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold">
    Button 1
  
   class="m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold">
    Button 2
  
   class="m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold">
    Button 3
  
 
template>

<-- component after -->
<template>
 

   :class="tailwindBtn">
    Button 1
  
   :class="tailwindBtn">
    Button 2
  
   :class="tailwindBtn">
    Button 3
  
 
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>

در نهایت، حفظ و تغییر آن آسان تر است. وضوح قابل بحث است. به خصوص اگر عناصر یکسانی را در سراسر برنامه خود داشته باشید و باید تعریف را در مقداری ثابت جهانی مانند افزایش دهید.

بیشتر دنبال راه حل بهتری بودم.

و من با Tailwind آشنا شدم @apply بخشنامه اساساً مانند نفی کل مفهوم است. به جای قرار دادن تعاریف مستقیم روی عناصر بتنی، می توانید تعاریف خود را ایجاد کنید برگه سبک و آن را با کلاس های سفارشی و تنظیمات عناصر پر کنید. فقط به جای قوانین CSS ساده، راه حل هایی را از کلاس های ابزار Tailwind تهیه می کنید.

عجیب است، اما به نظر می رسید با تعاریف تکراری مشکل ذهنی من را برطرف می کند.

هم معلم VueSchool و هم اسناد Tailwind به من هشدار داده بودند نه برای استفاده از آن، اما طبیعتاً من گوش نکردم.

من با استفاده از این روش چند وب سایت ایجاد کردم. کار کرد. مشکل حل شد یا

سریع به اواخر سال 2024 بروید. من برای یکی از وب سایت هایم ایده های جدیدی دریافت کردم. شروع کردم به کدنویسی کلا فراموش کردم @apply دشنام هایی که بیش از یک سال پیش انجام دادم. و ناگهان متوجه شدم که نمی توانم چیدمانم را کنار هم بگذارم.

اگرچه هیچ سبک ظاهری در قالب من استفاده نشده است

div {
  @apply m-auto text-center text-white;
}

<-- MyButton.vue -->
<template>
   class="m-2 p-2 rounded border border-2 border-yellow-500 bg-blue-500 text-black text-lg font-bold">
    {{ caption }}
  
template>

<script setup lang="ts">
defineProps({ caption: String })
script>

<-- app.vue -->
<template>
 

   caption="Button 1" />
   caption="Button 2" />
   caption="Button 3" />
 
template>