شبه عناصر (pseudo-elements) در tailwindcss

pseudo elements tailwind css

 Tailwind اخیراً گزینه ای را برای استایل دادن به شبه عناصر (pseudo-element) اضافه کرده است. از زمان معرفی Tailwind JIT به نظر می رسد که ما اکنون می توانیم از شبه عناصر در Tailwind نیز استفاده کنیم!

بیایید ببینیم چگونه کار می کند و چه کاری می توانیم با آنها انجام دهیم.

 

شبه عناصر یا pseudo-element چیست؟

 

اگر از شبه عناصر اطلاعات ندارید ، آنها عناصری هستند که به انتخابگرها برای انتخاب قسمتی از محتوای عنصر اضافه می شوند. مانند :hover، first و غیره هستند.

تفاوت  آنها با دیگر انتخابگرها در این است که شبه کلاس ها (pseudo-class) عناصر را با توجه به رفتار کاربر, وضعیت عنصر و غیره بصورت پویا هدف قرار می دهند.. آنها می توانند به ما قدرت فوق العاده ای بدهند تا عناصر با استایل جدید را به DOM اضافه کنیم.

 شبه عناصر همیشه با دو :: شروع می شوند ولی در آن کلاس های tailwindcss فقط از یک : استفاده می کنند.

بیایید به هر یک از شبه عناصر و نحوه استفاده از آنها در Tailwind CSS نگاه کنیم.

 

شبه عنصر first-line در tailwindcss

 

این شبه عنصر می تواند خط اول یک جمله خاص را دستکاری کند.

فرض کنید می‌خواهیم خط اول مقاله را آبی کنیم، تا بیشتر به چشم بیاد. همچنین  می‌توانیم خط اول را به حروف بزرگ تبدیل کنیم.

 

<p class="first-line:uppercase first-line:tracking-widest first-line:text-sky-500 ">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem rem quod placeat obcaecati dicta nostrum quasi,
sunt ipsa? Aspernatur dignissimos amet natus quibusdam laudantium quos itaque delectus deserunt sit pariatur! Lorem
ipsum dolor sit amet consectetur adipisicing elit. Ducimus repellat impedit accusantium dolores nam labore culpa
fuga debitis, rem cupiditate unde quam enim officiis excepturi illum cumque quod aperiam deserunt!
</p>

 

این منجر به تغییرات زیر خواهد شد:

 

See the Pen Tailwindcss Pseudo-element first-line by mousa aghahoseini (@mousair-the-scripter) on CodePen.

 

شبه عنصر first-letter در tailwindcss

 

مانند انتخابگر خط اول، می توانیم حرف اول را نیز هدف قرار دهیم. شما اغلب این را در آن کتاب های قدیمی می بینید که جلوه خوبی می دهد.

من شخصاً واقعاً این افکت را دوست دارم و این نحوه استفاده از آن در Tailwind CSS است.

 

<p class="first-letter:text-7xl first-letter:font-bold first-letter:mr-3 first-letter:float-left first-letter:text-teal-500">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem rem quod placeat obcaecati dicta nostrum quasi,
sunt ipsa? Aspernatur dignissimos amet natus quibusdam laudantium quos itaque delectus deserunt sit pariatur! Lorem
ipsum dolor sit amet consectetur adipisicing elit. Ducimus repellat impedit accusantium dolores nam labore culpa
fuga debitis, rem cupiditate unde quam enim officiis excepturi illum cumque quod aperiam deserunt!
</p>

 

نتیجه  به این صورت خواهد بود:

 

See the Pen Tailwindcss Pseudo-element first-letter by mousa aghahoseini (@mousair-the-scripter) on CodePen.

 

شبه عنصر before در tailwindcss

 

شبه عنصر before برای افزودن عنصر جدید اضافی به dom مناسب است، که می توانید از آن برای افزودن جلوه های زیبا به عناصر خاص استفاده کنید.

بیایید سعی کنیم یک پس زمینه جالب برای یک تصویر ایجاد کنیم. ما می خواهیم تصویر نشان داده شود، اما باید یک div رنگی متفاوت با زاویه، در پس زمینه وجود داشته باشد.

 

<div class='relative before:block before:absolute before:-inset-1 before:-rotate-6   before:bg-teal-500'>
    <img class='relative border-4 border-white' src='https://i.postimg.cc/B6ff6cwb/a.jpg' />
  </div>

 

که منجر به موارد زیر خواهد شد:

 

See the Pen Tailwindcss Pseudo-element before by mousa aghahoseini (@mousair-the-scripter) on CodePen.

 

شبه عنصر after در tailwindcss

 

عنصر after را می توان مانند عنصر before استفاده کرد. بیایید چیز دیگری را برای این یکی امتحان کنیم.

ما اغلب فرم هایی با فیلدهای الزامی داریم. بیایید یک * قرمز برای فیلدهای مورد نیاز اضافه کنیم.

 

<label class="block">
  <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-gray-700">
    password
  </span>
  <input type="password" name="password" class="mt-1 px-3 py-2 bg-white border shadow-sm border-gray-300 placeholder-gray-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 block w-full rounded-md sm:text-sm focus:ring-1" placeholder="you@example.com" />
</label>

 

نتیجه این قطعه شگفت انگیز:

 

See the Pen Tailwindcss Pseudo-element after by mousa aghahoseini (@mousair-the-scripter) on CodePen.

 

شبه عنصر selection در tailwindcss

 

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

با استفاده از کلاس های زیر:

 

  <p class='selection:bg-yellow-600 selection:text-white'>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
  mollit anim id est laborum.
</p>

 

با انتخاب چند متن آن را امتحان کنید:

 

See the Pen Tailwindcss Pseudo-element selection by mousa aghahoseini (@mousair-the-scripter) on CodePen.

 

 نتیجه:

 

اکنون که می‌توانیم از این انتخابگرها در Tailwind استفاده کنیم، تقریباً نیازی به CSS سفارشی در هنگام استفاده از Tailwind نیست.

من خوشحال هستم که اینها اکنون به خوبی پشتیبانی می شوند، و مطمئن هستم که شرایط را تغییر می دهد.

اگر می‌خواهید بیشتر بخوانید، از داکیومنت Tailwind که بهترین مرجع برای کسب اطلاعات بیشتر است کمک بگیرید.

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *