راهنمای مبتدیان برای Tailwind CSS در React

از فریمورک های CSS نظری خسته شده اید؟ به دنبال گزینه ای قوی هستید که به شما آزادی خلق بدهد؟ Tailwind CSS را امتحان کنید.

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

چرا از Tailwind CSS استفاده کنیم؟

در حال حاضر بسیاری از چارچوب های CSS وجود دارند که نحوه طراحی صفحات وب را توسط توسعه دهندگان ساده می کنند. پس چرا باید از Tailwind CSS استفاده کنید؟

فریم ورک‌های CSS مانند Bootstrap و Foundation، چارچوب‌های نظری هستند، به این معنی که اجزای از پیش تعریف‌شده‌ای را در اختیار توسعه‌دهندگان قرار می‌دهند که دارای سبک‌های پیش‌فرض هستند. این امر هم سفارشی‌سازی و هم خلاقیت را محدود می‌کند و در نهایت با وب‌سایت‌هایی مواجه می‌شوید که نسبتاً عمومی به نظر می‌رسند.

با این حال، Tailwind CSS یک چارچوب کاربردی است که به شما کنترل خلاقانه ای برای ایجاد اجزای پویا می دهد. و بر خلاف بوت استرپ، شما به راحتی می توانید طرح ها را به دلخواه شخصی سازی کنید.

مزیت دیگر استفاده از Tailwind CSS این است که در نهایت با یک بسته نرم افزاری CSS کوچک مواجه می شوید زیرا تمام CSS های استفاده نشده را در طول فرآیند ساخت حذف می کند (که با Bootstrap متفاوت است، زیرا شامل تمام فایل های CSS در ساخت می شود).

در مورد تفاوت های Tailwind CSS و Bootstrap از مقاله ما در مورد این موضوع بیشتر بیاموزید.

معایب استفاده از Tailwind CSS

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

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

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

شروع: یک پروژه React ایجاد کنید

دستور زیر را در ترمینال اجرا کنید تا با استفاده از create-react-app یک برنامه React را داربست کنید.

npx create-react-app react-tailwind

Create-react-app راه آسانی برای ایجاد یک برنامه React بدون پیکربندی ابزارهای ساخت مانند webpack، babel یا linters فراهم می کند. این بدان معنی است که شما در عرض چند دقیقه با یک محیط React کار می کنید.

دستور بالا یک پوشه جدید به نام react-tailwind ایجاد می کند. به پوشه بروید و با استفاده از ویرایشگر متن دلخواه خود آن را باز کنید.

cd react-tailwind

بعد، Tailwind CSS را نصب کنید و آن را برای کار با برنامه React پیکربندی کنید.

از Tailwind CSS در React استفاده کنید

Tailwind CSS و وابستگی های آن را با این دستور نصب کنید:

npm install tailwindcss postcss autoprefixer

PostCSS از افزونه های جاوا اسکریپت برای سازگاری CSS با اکثر مرورگرها استفاده می کند. مرورگری را که برنامه در آن اجرا می شود بررسی می کند و پلی پرهای مورد نیاز برای کارکرد یکپارچه CSS شما را تعیین می کند. Autoprefixer یک افزونه PostCSS است که از مقادیر caniuse.com برای اضافه کردن خودکار پیشوندهای فروشنده به قوانین CSS استفاده می کند.

Tailwind CSS را راه اندازی کنید

دستور tailwind init را اجرا کنید تا فایل های پیکربندی پیش فرض Tailwind CSS تولید شود.

npx tailwindcss init

این tailwind.config.js را در پوشه ریشه ایجاد می کند که تمام فایل های پیکربندی Tailwind را ذخیره می کند و حاوی موارد زیر است:

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

مسیرهای الگو را پیکربندی کنید

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

در tailwind.config.js، مسیرهای الگو را در زیر کلید محتوا اضافه کنید.

module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}

Tailwind CSS را در React تزریق کنید

گام بعدی این است که Tailwind CSS را با استفاده از دستورات @tailwind در برنامه قرار دهید.

همه چیز را در index.css حذف کنید و موارد زیر را برای وارد کردن سبک‌ها، مؤلفه‌ها و ابزارهای اصلی اضافه کنید.

@tailwind base;
@tailwind components;
@tailwind utilities;

در نهایت، مطمئن شوید که index.css در index.js وارد شده است و Tailwind CSS برای استفاده آماده خواهد بود.

استفاده از Tailwind CSS برای استایل کردن کامپوننت React

صفحه وب ساده زیر را ایجاد کرده و با استفاده از کلاس های کاربردی Tailwind به آن استایل می دهید.

این صفحه شامل دو بخش اصلی است: یک نوار ناوبری، و بخش قهرمان (که دارای یک عنوان و یک دکمه است).

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

با تغییر App.js در پوشه src برای حذف کدهای غیر ضروری شروع کنید.

import './App.css'
function App() {
return (
<div className='app'>
</div>
);
}
export default App;

سپس محتوای صفحه وب را به App.js اضافه کنید.

import "./App.css";
function App() {
return (
<div className="wrapper">
<nav>
<div className="logo">Tailwind CSS</div>
<ul>
<li>Install</li>
<li>Docs</li>
</ul>
</nav>
<div className="hero">
<h1 className="header">
Tailwind CSS makes styling React components easier!
</h1>
<button className="btn">Get Started</button>
</div>
</div>
);
}

برای استفاده از CSS ساده، CSS را به App.css اضافه کنید.

nav {
display: flex;
justify-content: space-between;
padding: 16px 36px;
color: #000;
box-shadow: 0px 2px 5px 0px rgba(168, 168, 168, 0.75);
}
.logo {
font-size: 18px;
font-weight: bold;
}
ul {
list-style: none;
display: inline-flex;
}
ul li {
margin-left: 16px;
cursor: pointer;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 64px;
}
h1 {
font-size: 36px;
text-align: center;
}
.btn {
background-color: #000000;
color: #fff;
padding: 10px;
width: fit-content;
margin-top: 36px;
}


با Tailwind CSS، نیازی به نوشتن قوانین CSS برای هر کلاس ندارید. در عوض، شما از کلاس های کاربردی استفاده می کنید. اینها کلاس هایی هستند که به یک ویژگی CSS محدود شده اند. به عنوان مثال، اگر می خواهید دکمه ای با پس زمینه سیاه و رنگ متن سفید ایجاد کنید، باید از کلاس های ابزار bg-black و text-white استفاده کنید.

App.js باید شبیه این باشد.

function App() {
return (
<div>
<Navbar />
<div className="flex flex-col items-center mt-16">
<h1 className="text-4xl text-center">
Tailwind CSS makes styling React components easier!
</h1>
<button className="bg-black text-white p-2.5 w-fit mt-9 ">
Get Started
</button>
</div>
</div>
);
}

شما نیازی به وارد کردن App.css ندارید زیرا سبک های تولید شده توسط Tailwind CSS در index.css که قبلاً در index.js وارد کرده اید ذخیره می شوند.

در مقایسه با CSS ساده، این رویکرد منجر به کد کمتری می شود که به راحتی قابل درک باشد.

کد به سبک با Tailwind CSS

در این مقاله با Tailwind CSS، نقاط قوت، معایب آن و نحوه استفاده از کلاس های کاربردی آن در برنامه های React آشنا شدید. جدا از کلاس‌ها، Tailwind CSS ویژگی‌های اضافی دیگری از جمله توانایی ایجاد طرح‌بندی‌های واکنش‌گرا و اجزای قابل استفاده مجدد را نیز ارائه می‌دهد.

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

منبع مقاله