متغیرهای دلخواه Tailwind CSS: رونمایی از شبه-انتخاب‌گرهای سفارشی

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

درک متغیرهای Tailwind CSS

قبل از پرداختن به متغیرهای دلخواه، درک مفهوم متغیرها در Tailwind CSS ضروری است. متغیرها، اصلاح‌کننده‌هایی هستند که رفتار پیش‌فرض یک کلاس ابزار را تغییر می‌دهند. متغیرهای رایج عبارتند از:

• `hover:`: استایل را در هنگام معلق بودن ماوس اعمال می‌کند.
• `focus:`: استایل را زمانی که عنصر متمرکز است اعمال می‌کند.
• `active:`: استایل را زمانی که عنصر فعال است (به عنوان مثال، کلیک شده) اعمال می‌کند.
• `disabled:`: استایل را زمانی که عنصر غیرفعال است اعمال می‌کند.
• `breakpoints responsive (sm:, md:, lg:, xl:, 2xl:)`: استایل را بر اساس اندازه صفحه اعمال می‌کند.

این متغیرها به کلاس ابزار پیشوند می‌شوند، به عنوان مثال، `hover:bg-blue-500` رنگ پس‌زمینه را در هنگام معلق بودن ماوس به آبی تغییر می‌دهد. فایل پیکربندی Tailwind (`tailwind.config.js`) به شما امکان می‌دهد این متغیرها را سفارشی کنید و متغیرهای جدیدی را بر اساس نیازهای پروژه خود اضافه کنید.

معرفی متغیرهای دلخواه

متغیرهای دلخواه، سفارشی‌سازی متغیرها را به سطح بعدی می‌برند. آنها شما را قادر می‌سازند تا انتخاب‌گرهای کاملاً سفارشی را با استفاده از نماد براکت مربع تعریف کنید. این امر زمانی بسیار مفید است که شما نیاز دارید عناصری را بر اساس حالات، ویژگی‌ها یا روابط خاصی که توسط متغیرهای پیش‌فرض Tailwind پوشش داده نشده‌اند، هدف قرار دهید.

نحو برای متغیرهای دلخواه ساده است:

            [<selector>]:<utility-class>
            

              
                Copy
              
            
          

جایی که:

• `[<selector>]` انتخاب‌گر دلخواه است که می‌خواهید هدف قرار دهید. این می‌تواند هر انتخاب‌گر CSS معتبری باشد.
• `<utility-class>` کلاس ابزار Tailwind CSS است که می‌خواهید هنگام مطابقت انتخاب‌گر اعمال کنید.

بیایید این را با مثال‌ها نشان دهیم.

مثال‌های عملی از متغیرهای دلخواه

1. هدف قرار دادن اولین عنصر فرزند

فرض کنید می‌خواهید به عنصر فرزند اول یک کانتینر، استایل متفاوتی بدهید. شما می‌توانید این کار را با استفاده از شبه-انتخاب‌گر `:first-child` انجام دهید:

            <div class="flex flex-col">
  <div class="[&:first-child]:text-red-500">First Item</div>
  <div>Second Item</div>
  <div>Third Item</div>
</div>
            

              
                Copy
              
            
          

در این مثال، `[&:first-child]:text-red-500` کلاس ابزار `text-red-500` (قرمز کردن متن) را به اولین عنصر فرزند `div` با کلاس `flex flex-col` اعمال می‌کند. نماد `&` نشان‌دهنده عنصر والد است که کلاس‌ها برای آن اعمال می‌شوند. این اطمینان می‌دهد که انتخاب‌گر، اولین فرزند را *درون* والد مشخص شده، هدف قرار می‌دهد.

2. استایل‌دهی بر اساس حالت والد (Group-Hover)

یک الگوی طراحی رایج، تغییر ظاهر یک عنصر فرزند در هنگام معلق بودن ماوس روی والد آن است. Tailwind متغیر `group-hover` را برای سناریوهای اساسی ارائه می‌دهد، اما متغیرهای دلخواه انعطاف‌پذیری بیشتری را ارائه می‌دهند.

            <div class="group hover:bg-gray-100 p-4 rounded-md shadow-md">
  <h2 class="text-lg font-semibold">Product Title</h2>
  <p class="text-gray-600 [&_.description]:line-clamp-2">Product description goes here.  This is a longer description that will be truncated.
  If the parent is hovered, the description becomes black.</p>
  <p class="description [&:hover]:text-black">Hover Parent to change this color</p>
</div>
            

              
                Copy
              
            
          

در اینجا، `[&:hover]:bg-gray-100` در صورت معلق بودن ماوس روی `group`، یک پس‌زمینه خاکستری روشن اضافه می‌کند. توجه داشته باشید که چگونه کلاس `group` را با متغیر دلخواه ترکیب می‌کنیم. داشتن کلاس `group` برای عملکرد این کار مهم است.

3. هدف قرار دادن عناصر بر اساس مقادیر ویژگی

متغیرهای دلخواه همچنین می‌توانند عناصر را بر اساس مقادیر ویژگی آن‌ها هدف قرار دهند. به عنوان مثال، ممکن است بخواهید به یک پیوند، بسته به اینکه به یک منبع داخلی یا خارجی اشاره دارد، استایل متفاوتی بدهید.

            <a href="/internal-page" class="[&[href^='/']]:text-blue-500">Internal Link</a>
<a href="https://www.example.com" class="[&[href*='example.com']]:text-green-500">External Link</a>
            

              
                Copy
              
            
          

در این کد:

• `[&[href^='/']]` پیوندهایی را انتخاب می‌کند که ویژگی `href` آن‌ها با `/` (پیوندهای داخلی) شروع می‌شود و کلاس `text-blue-500` را اعمال می‌کند.
• `[&[href*='example.com']]` پیوندهایی را انتخاب می‌کند که ویژگی `href` آن‌ها شامل `example.com` است و کلاس `text-green-500` را اعمال می‌کند.

4. مدیریت حالت پیچیده (به عنوان مثال، اعتبار سنجی فرم)

متغیرهای دلخواه برای استایل‌دهی عناصر بر اساس حالت‌های اعتبارسنجی فرم بسیار مفید هستند. سناریویی را در نظر بگیرید که می‌خواهید به‌طور بصری نشان دهید که آیا یک ورودی فرم معتبر است یا نامعتبر.

            <input type="text" class="border rounded p-2 [&:invalid]:border-red-500 [&:valid]:border-green-500" placeholder="Enter your email" required>
            

              
                Copy
              
            
          

در اینجا:

• `[&:invalid]:border-red-500` یک حاشیه قرمز را زمانی اعمال می‌کند که ورودی نامعتبر باشد (به دلیل ویژگی `required` و فقدان ورودی معتبر).
• `[&:valid]:border-green-500` یک حاشیه سبز را زمانی اعمال می‌کند که ورودی معتبر باشد.

این بازخورد بصری فوری را به کاربر ارائه می‌دهد و تجربه کاربری را بهبود می‌بخشد.

5. کار با ویژگی‌های سفارشی (متغیرهای CSS)

شما می‌توانید متغیرهای دلخواه را با متغیرهای CSS (ویژگی‌های سفارشی) برای استایل‌دهی حتی پویاتر ترکیب کنید. این به شما امکان می‌دهد ظاهر عناصر را بر اساس مقدار یک متغیر CSS تغییر دهید.

            <div class="[&[--theme='dark']]:bg-gray-800 [&[--theme='dark']]:text-white p-4 rounded-md" style="--theme: light;">
  <p>This is a themed box.</p>
</div>
            

              
                Copy
              
            
          

در این مثال:

• ما یک متغیر CSS `--theme` را درون خطی با مقدار پیش‌فرض `light` تعریف می‌کنیم.
• `[&[--theme='dark']]:bg-gray-800 [&[--theme='dark']]:text-white` یک پس‌زمینه تیره و متن سفید را زمانی اعمال می‌کند که متغیر `--theme` روی `dark` تنظیم شده باشد.

شما می‌توانید مقدار متغیر `--theme` را با استفاده از JavaScript به‌طور پویا تغییر دهید تا بین تم‌های مختلف جابجا شوید.

6. هدف قرار دادن عناصر بر اساس پرس‌وجوهای رسانه

در حالی که Tailwind متغیرهای پاسخگو (sm:، md:، و غیره) را ارائه می‌دهد، می‌توانید از متغیرهای دلخواه برای سناریوهای پیچیده‌تر پرس‌وجوی رسانه استفاده کنید.

            <div class="[&[media(max-width: 768px)]]:text-center">
  <p>This text will be centered on screens smaller than 768px.</p>
</div>
            

              
                Copy
              
            
          

این کد کلاس ابزار `text-center` را زمانی اعمال می‌کند که عرض صفحه کمتر یا مساوی 768 پیکسل باشد.

بهترین روش‌ها و ملاحظات

1. ویژگی خاص

هنگام استفاده از متغیرهای دلخواه، به ویژگی خاص CSS توجه داشته باشید. متغیرهای دلخواه مستقیماً در CSS شما تزریق می‌شوند و ویژگی خاص آن‌ها توسط انتخاب‌گری که استفاده می‌کنید، تعیین می‌شود. انتخاب‌گرهای خاص‌تر، انتخاب‌گرهای کم‌خاصیت‌تر را لغو می‌کنند.

2. خوانایی و قابلیت نگهداری

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

3. عملکرد

از انتخاب‌گرهای بیش از حد پیچیده خودداری کنید، زیرا می‌توانند بر عملکرد تأثیر بگذارند. انتخاب‌گرهای خود را تا حد امکان ساده و کارآمد نگه دارید. برنامه خود را مشخص کنید تا هرگونه گلوگاه عملکردی مربوط به انتخاب‌گرهای CSS را شناسایی کنید.

4. پیکربندی Tailwind

در حالی که متغیرهای دلخواه امکان استایل‌دهی در لحظه را فراهم می‌کنند، اضافه کردن انتخاب‌گرهای سفارشی که اغلب استفاده می‌شوند به فایل `tailwind.config.js` خود را به عنوان متغیرهای سفارشی در نظر بگیرید. این می‌تواند قابلیت استفاده مجدد و سازگاری کد را بهبود بخشد.

5. دسترسی‌پذیری

اطمینان حاصل کنید که استفاده شما از متغیرهای دلخواه تأثیری منفی بر دسترسی‌پذیری نداشته باشد. به عنوان مثال، اگر از رنگ برای نشان دادن حالت استفاده می‌کنید، اطمینان حاصل کنید که نشانه‌های بصری جایگزین را برای کاربرانی که دچار کوررنگی هستند، ارائه می‌دهید.

افزودن متغیرهای سفارشی به `tailwind.config.js`

همانطور که قبلاً ذکر شد، می‌توانید متغیرهای سفارشی را به فایل `tailwind.config.js` خود اضافه کنید. این برای انتخاب‌گرهای متداول مفید است. در اینجا یک مثال آورده شده است:

            module.exports = {
  theme: {
    extend: {
      extend: {},
    },
  },
  plugins: [],
}

            

              
                Copy
              
            
          

نتیجه

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

یادگیری بیشتر

• مستندات Tailwind CSS: https://tailwindcss.com/docs/hover-focus-and-other-states
• ویژگی خاص CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity