من با استفاده از tailwindcs 10 برابر سریعتر کد می کنم

سلام بچه ها ، این پسر شما LuckyReact است. اگر شما یک توسعه دهنده هستید که عاشق سرعت و کارآیی هستید ، Tailwind CSS مثل این است کد تقلب بیش از حد این باعث می شود توسعه UI شما بسیار سریع باشد. به جای نوشتن تن CSS سفارشی ، فقط استفاده می کنید کلاسهای ابزاری برای سبک کردن عناصر به طور مستقیم در HTML یا JSX.

بیایید تجزیه کنیم چگونه Tailwind CSS بهره وری را مانند یک حرفه ای افزایش می دهد.

1. هیچ سوئیچینگ بیشتر زمینه

در CSS سنتی ، شما باید:

1. HTML را بنویسید
2. به یک پرونده CSS بروید
3. یک کلاس را تعریف کنید
4. سبک ها را اعمال کنید
5. برای تنظیمات به عقب و جلو بروید

با Tailwind ، همه چیز در یک مکان باقی می ماند. بدون تعویض بین پرونده ها، فقط کلاس ها را مستقیماً اضافه کنید:

<button className="bg-blue-500 text-white px-4 py-2 rounded-lg">
  Click Me
button>

یک ظاهر طراحی شده یک لاین = سربار کمتر ذهنی

2. نیازی به نام بردن کلاس ها به صورت خلاقانه نیست

همه ما با نام کلاس مانند:

• container-main-wrapper
• hero-section-header-text
• big-blue-button

با پیچ و خم ، سردرد نامگذاری را فراموش کنید! فقط سبک ها را با استفاده از کلاس های ابزار توصیف کنید:

<h1 className="text-4xl font-bold text-gray-800">Hello, Tailwind!h1>

دیگر “چه چیزی را باید این کلاس نامگذاری کنم؟” لحظه ها!

3. نمونه سازی سریعتر = توسعه سریعتر

بادگیک است مناسب برای نمونه سازی سریع زیرا نیازی به نوشتن سبک های سفارشی نیست. UI کارت می خواهید؟ فقط در بعضی از کلاس ها پرتاب کنید:

<div className="max-w-sm bg-white shadow-lg rounded-lg p-4">
  <h2 className="text-xl font-semibold">Tailwind is Awesome!h2>
  <p className="text-gray-600">Building UIs has never been this fast.p>
div>

از ایده به UI در چند دقیقه!

4. طراحی پاسخگو داخلی

به جای نوشتن @Media به صورت دستی ، Tailwind پاسخگویی را به نسیم تبدیل می کند:

<div className="p-4 sm:p-6 md:p-8 lg:p-12">
  Responsive Padding
div>

• sm: ankens صفحه های کوچک
• md: صفحه های متوسط
• lg: → صفحه های بزرگ

پاسخگویی یک لاین = نیازی به پرونده های جداگانه CSS نیست!

5. طراحی مداوم و بدون تلاش اضافی

پیچ و خم همراه با سیستم طراحی از پیش تنظیم شده، بنابراین لازم نیست نگران حاشیه های متناقض ، بالشتک ها یا اندازه های فونت باشید. سیستم فاصله از مقیاس (4 ، 8 ، 12 ، 16 و غیره)، ساخت چیدمان ها.

<div className="space-y-4">
  <p className="text-lg">Item 1p>
  <p className="text-lg">Item 2p>
  <p className="text-lg">Item 3p>
div>

به طور خودکار فاصله مناسب را حفظ می کند!

6. حالت تاریک؟ فقط یک کلاس دور!

به جای نوشتن CSS پیچیده برای حالت تاریک ، Tailwind آن را ایجاد می کند فوق العاده آسان:

<div className="bg-white dark:bg-gray-900 text-black dark:text-white p-4">
  Dark Mode Ready!
div>

فقط با اضافه کردن حالت تاریک را فعال کنید dark: کلاس ها!

7. دیگر CSS نفخ نیست

پیچ های پیچ خورده تدوین فقط به موقع (JIT)، این یعنی فقط سبک هایی را که استفاده می کنید شامل می شود در پرونده نهایی CSS شما. بر خلاف bootstrap یا چارچوب های دیگر ، شما به CSS بلااستفاده پایان نمی دهید.

CSS کوچکتر = زمان بار سریعتر!

8. مناسب برای تیم ها و مقیاس گذاری

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

یک ظاهر طراحی مداوم = همکاری آسان تر!

امیدوارم از خواندن مقاله لذت ببرد. اگر فکر می کنید محتوای من مفید است ، لطفاً واکنش به این پست را در نظر بگیرید و یک نظر مثبت نیز اضافه کنید. در مقاله بعدی به YA مراجعه کنید. یک روز عالی پیش رو داشته باشید!