راهنمای طراحی وب سایت خود با Tailwind CSS

آیا از نوشتن CSS از ابتدا و گذراندن ساعت ها به سر و کله زدن با سبک ها خسته شده اید؟ آیا می خواهید روند توسعه وب خود را بدون به خطر انداختن سفارشی سازی سرعت بخشید؟ به دنبال Tailwind نباشید، اولین فریم ورک CSS کاربردی که فرآیند استایل را ساده می کند و کنترل را در دستان شما باز می گرداند. در این وبلاگ، همه چیزهایی را که باید در مورد Tailwind بدانید، از نصب تا سفارشی‌سازی، پوشش می‌دهیم تا بتوانید فوراً از آن در پروژه‌های خود استفاده کنید.

نصب و راه اندازی

فرآیند نصب بسیار ساده است. مستندات مربوط به tailwind به خوبی آن را پوشش می دهد. یک افزونه رسمی Tailwind VSCode وجود دارد که intellisense را برای کلاس‌های tailwind فراهم می‌کند. همچنین یک افزونه زیباتر وجود دارد که به مرتب‌سازی و مرتب‌سازی مجدد کلاس‌های tailwind کمک می‌کند.

با Tailwind، عناصر را با اعمال کلاس‌های از قبل موجود مستقیماً در HTML خود استایل می‌دهید.

Tailwind چیست؟

Tailwind کتابخانه ای است که به شما امکان می دهد عناصر خود را در خود HTML استایل دهید. چطور کار میکند؟ خوب، tailwind دارای کلاس های کاربردی است که سبک های از پیش تعریف شده ای دارند. تنها کاری که باید انجام دهید این است که آن کلاس ها را به عناصر HTML خود اضافه کنید.

مثال ها

فرض کنید دکمه‌ای وجود دارد که می‌خواهید با چند رنگ و چند حاشیه گرد به آن استایل بدهید. CSS چیزی شبیه به این خواهد بود:

button  {
  color: green;
  background-color: greenyellow;
  padding: 1rem 1.25rem;
  border-radius: 4rem;
  border: green 2px solid;
}

button:hover {
  color: white;
  background-color: green;
}

در اینجا نحوه انجام این کار در tailwind آورده شده است. ابتدا رنگ ها را اضافه می کنیم. اکنون tailwind یک را فراهم می کند. ما یکی را انتخاب می کنیم که با سبک ما مطابقت داشته باشد lime-500. برای استفاده از رنگ به عنوان رنگ پس زمینه، فقط استفاده کنید bg-lime-500.

در حال حاضر برای حاشیه ها و بالشتک ها، tailwind برخی از قراردادها را فراهم می کند. برای اضافه کردن حاشیه در تمام جهات استفاده کنید m-value. مثلا، m-4 اعمال خواهد شد 1 rem حاشیه در تمام جهات استفاده کنید mx-value فقط حاشیه چپ و حاشیه راست اعمال شود. به طور مشابه استفاده کنید my-value برای اعمال حاشیه در جهت بالا و پایین. شما می توانید استفاده کنید mt-value، mb-value، ml-value و mr-value برای اعمال حاشیه در جهات بالا، پایین، چپ و راست. (پدینگ به روشی مشابه کار می کند، فقط استفاده کنید p-value بجای m-value و غیره.)

برای شعاع مرزی، استفاده خواهیم کرد rounded-full. من به شدت توصیه می کنم برای مرجع، اسناد tailwind را بررسی کنید. در اینجا استایل دم بادی شما چگونه خواهد بود.

<button class=
"px-5 py-4
 lime-500 bg-lime-500 text-lime-900
 border-2 border-lime-900 border-solid">
Styled with Tailwind
</button>

مدیریت شبه انتخابگرها

Tailwind کار با شبه انتخابگرها را بسیار آسان می کند. تنها کاری که باید انجام دهید این است که نام شبه انتخابگر را به دنبال آن اضافه کنید : قبل از نام کلاس شما بنابراین focus:bg-lime-900 رنگ دکمه ما را در فوکوس و غیره تغییر می دهد.

<button class=
"px-5 py-4
 lime-500 bg-lime-500 text-lime-900
 border-2 border-lime-900 border-solid
 hover:bg-lime-900 hover:text-neutral-50">
Styled with Tailwind
</button>

پاسخگویی

افزودن مقداری واکنش گرایی به وب سایت شما ساده تر از همیشه است. Tailwind دارای 5 اندازه مختلف صفحه نمایش است. اینها هستند sm (<640px)، md (<768 پیکسل)، lg (<1024px)، xl (<1280px) و 2xl (<1536 پیکسل).

برای تغییر رنگ دکمه زمانی که اندازه صفحه از 640 پیکسل کوچکتر می شود، می توانیم اضافه کنیم sm:bg-red-500.

سفارشی سازی ها

1. ### فاصله

یادت باشه وقتی بهش اشاره کردم m-4 آیا 1 rem حاشیه در سراسر عنصر شما اعمال می شود؟ خوب، این رفتار پیش فرض است. با تغییر فایل پیکربندی tailwind می توانید فاصله خود را سفارشی کنید. (اگر فایل پیکربندی tailwind ندارید، کافی است یکی ایجاد کنید: tailwind.config.js .

/* tailwind.config.js */
module.exports = {
  theme: {
    spacing: { '2': '1rem', '4': '2rem' }
  }
}

اکنون m-2، p-2 و به همین ترتیب از 1 رم به جای 0.5 رم و استفاده می شود m-4، p-4 و به همین ترتیب از 4 رم به جای 2 رم استفاده می شود. می توانید از هر واحد CSS استفاده کنید.

1. ### رنگها

مشابه فاصله، می توانید با تغییر فایل پیکربندی tailwind رنگ های خود را نیز اضافه کنید. همچنین می توانید وزن ها را مطابق شکل زیر مشخص کنید.

/* tailwind.config.js */
module.exports = {
  theme: {
    colors: {
      primary: '#F2921D',
      secondary: '#F2CD5C',
      accent: '#BFDB38',
      purple: {
        100: '#EBC7E6',  /* different */
        200: '#BFACE2',  /* shades of */
        300: '#A084DC',  /* purple */
        400: '#645CBB'
      }
    }
  }
};

اکنون می‌توانیم از رنگ‌های خود در نام‌های کلاس tailwind استفاده کنیم، مانند bg-primary یا text-purple-300 و غیره

1. ### صفحه نمایش

می توانید اندازه صفحه نمایش را برای پاسخگویی مطابق شکل زیر تغییر دهید:

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
  }
};

شما می توانید ویژگی های دیگر مانند حاشیه-شعاع، خانواده فونت و غیره را سفارشی کنید. به اسناد مراجعه کنید.

ممنون که خواندید.
نویسنده: سامیابراتا ماجی