فناوری CSS یکی از بزرگترین تغییرات در توسعه و طراحی وب سایت ها بود. CSS قابلیت های ظاهری و آزادی بیشتری را برای طراحی فراهم کرد. البته با رشد CSS، پیچیدگی آن نیز کم کم افزایش یافت. البته اکنون نوشتن CSS مانند گذشته چالش برانگیز نیست، اما اجرای آن می تواند دشوار باشد. مرحله بعدی در پیشرفت CSS توسعه کتابخانه ها و فریم ورک ها بود. از معروف ترین نمونه فریم ورک های CSS فریم ورک های Bootstrap و Tailwind هستند.
البته فریم ورک بوت استرپ یک عیب بزرگ دارد، این فریم ورک به دلیل افزایش رشد و استفاده، بیش از حد بزرگ شده و کنترل کمتری بر سبک های خود ارائه می دهد. همچنین یادگیری فریم ورک های مانند Bootstrap به طور فزاینده ای چالش برانگیز شده است زیرا توسعه دهندگان باید برای کار با آن صد ها کلاس را یاد بگیرند. اما در مورد فریم ورک Tailwind این طور نیست و ما در این مقاله به معرفی Tailwind و موارد پیرامون آن خواهیم پرداخت.
نکته: برای دنبال کردن این آموزش، درک اولیه HTML و CSS ضروری بوده و هر گونه تجربه قبلی با چارچوب CSS یک مزیت اضافی است.
فریم ورک Tailwind CSS چیست؟
Tailwind یک فریم ورک CSS است که توسط آدام واتان ایجاد شد. برخلاف سایر فریم ورک ها، Tailwind از کلاس هایی از پیش ساخته تشکیل نمی شود تا به تگ های HTML اضافه شود. در عوضTailwind، از یک رویکرد متفاوت استفاده می کند، Tailwind با استفاده از کلاس های مبتنی بر ابزار، سطح بسیار پایین تری از کنترل را به ارمغان می آورد.
نصب و راه اندازی Tailwind
بیایید مستقیماً وارد این فریم ورک شویم و Tailwind CSS را نصب کنیم تا بتوانیم اطلاعات بیشتری در مورد آن کشف کنیم. البته بسته به نوع استفاده شما از این فریم ورک، شما دو راه برای نصب Tailwind CSS دارید.
روش اول: نصب با استفاده از CDN
استفاده از CDN رایج ترین روش استفاده از هر چارچوبی در CSS است و Tailwind نیز از این قاعده مستثنی نیست. برای این کار ما باید ابتدا فایل CSS مربوط به Tailwind را از CDN به شکل یک پیوند در قسمت head فایل HTML خود اضافه می کنیم.
برای این کار شما باید ابتدا یک فایل HTML ایجاد کنید و نامی برای آن بگذارید. ما نام فایل خود را .index.html خواهیم گذاشت، سپس در داخل آن، کد HTML boilerplate را بنویسید و CDN را مطابق شکل زیر اضافه کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Section Tailwind Demo</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body></body>
</html>تا اینجا ما Tailwind CSS را در پروژه خود نصب کرده ایم. البته باید توجه داشته باشید که نصب فریم ورک Tailwind CSS با استفاده از CDN خود دارای چند شرط مهم است، که باید به آن ها توجه کنید، برخی این شرایط مانند:
- شما نمی توانید هیچ پلاگین شخص ثالثی را به آن اضافه کنید.
- از آنجایی که Tailwind CSS فایل ها را هنگام بارگیری فایل واکشی می کند، نمی توانید فایل های استفاده نشده را پاک کنید.
- شما نمی توانید برخی از پیکربندی ها مانند طرح زمینه را سرهم بندی کنید.
روش دوم: نصب با استفاده از NPM
استفاده از روش NPM تجربه کاملی از کار با Tailwind CSS را به شما می دهد. این یک روش نصب رایج است زیرا اکثر فریم ورک های جاوا اسکریپت از رویکردی مشابه آن استفاده می کنند. البته بسته به معماری فریم ورک، تفاوت های کمی در فرآیند نصب آن ها وجود دارد.
برای این کار ابتدا، باید یک دایرکتوری ایجاد کنیم که در ادامه در آن کار خواهیم کرد. سپس در ترمینال خود، کد زیر را اجرا کنید:
mkdir section-tailwind-demo && cd section-tailwind-demo
npm init -yاجرا در ترمینال:
npm install tailwindcss@latest postcss@latest autoprefixer@latest
دستور بالا تمام asset های مورد نیاز ما را نصب می کند. بعد از آن، ما باید یک اسکریپت برای پیکربندی Tailwind CSS و PostCss ایجاد کنیم. برای تولید این اسکریپت ها، از “tailwind cli”، یکی از ابزار ارائه شده توسط فریم ورک Tailwind CSS استفاده می کنیم.
اجرا در ترمینال:
npx tailwind init -p
دو فایل tailwind.config.js و .postcss.config.js آن نیز به شکل زیر اند:
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};.postcss.config.js
فایل .postcss.config.js هم باید شبیه به کد زیر باشد:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};اکنون که با موفقیت محیط مورد نظر خود را راه اندازی کردیم، اجازه دهید Tailwind CSS را نیز در پروژه خود راه اندازی کنیم. برای این کار ابتدا دو فایل ایجاد کنید. یک فایل HTML به نام index.html و یک فایل stylesheet به نام style.css.
قسمت HTML می تواند دستور پایه boilerplate را در ابتدای article داشته باشد. در فایل CSS نیز باید به autoprefixer اطلاع دهیم که از Tailwind CSS استفاده خواهیم کرد. ما این کار را با وارد کردن فایل‌های Tailwind CSS، مطابق شکل زیر انجام می دهیم:
@tailwind base;
@tailwind components;
@tailwind utilities;در نهایت، ما باید Tailwind CSS خود را بسازیم، بنابراین در ترمینال اجرا به چنین چیزی نیاز داریم:
npx tailwindcss-cli@latest build -o css/tailwind.css
این دستور، یک فایل tailwind.css در پوشه CSS ایجاد می کند. همچنین دستور -o در دستور ما، مخفف راه خروجی است و ما مشخص کردیم که فایل خروجی ما در مسیر css/tailwind.css قرار بگیرد.
توجه: برای کار با این دستور نیازی به داشتن یک فایل CSS نیست، زیرا ما فایل CSS Tailwind را تولید می کنیم. با این حال، ممکن است برای افزودن سبک های سفارشی، به فریم ورک Tailwind CSS در این فایل، یا مخلوط کردن Tailwind CSS با CSS سفارشی، به فایل style.css نیاز داشته باشیم.
یک روش متفاوت برای پردازش CSS این است که آن را در تولید با افزودن یک اسکریپت در package.json انجام دهید. ما از postcss cli برای اجرای عملیات در طول زمان ساخت استفاده می کنیم. برای انجام این کار، ابتدا باید PostCSS CLI را نصب کنیم.
برای این کار، این را در ترمینال اجرا کنید:
npm install postcss-cli
بعد، اسکریپت ساخت را در package.json به این صورت اضافه می کنیم:
"scripts": {
"build": "postcss style.css -o css/tailwind.css"
}اکنون، زمانی که npm run build را اجرا می کنید، باید فایل مربوط به فریم ورک CSS Tailwind را همانطور که می خواستیم در یک پوشه CSS کامپایل کنید. سپس باید فایل Tailwind CSS خود را مانند یک فایل CSS معمولی به HTML اضافه کنیم.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/tailwind.css" /
>
</head>
<body></body>
</html>
به این ترتیب، تا این جا ما همه چیز را آماده کرده ایم و فریم ورک Tailwind نصب شده است.
کار با کلاس های کاربردی فریم ورک Tailwind
برای نشان دادن و توضیح نحوه عملکرد کلاس ها و ابزار های آن، اجازه دهید با استفاده از Tailwind CSS یک دکمه ایجاد کنیم. این کار نشان می دهد که چگونه فریم ورک Tailwind CSS بر عناصر HTML تأثیر می گذارد.
در تگ Body در صفحه HTML، اضافه کنید:
<button>Section</button>
بیایید چند کلاس به دکمه خود اضافه کنیم زیرا اینگونه ساده به نظر می رسد. در Tailwind CSS، مقدار رنگ بسته به شدت رنگ از 100 تا 900 متغیر است. کلاس کاربردی برای پس زمینه bg است. برای اینکه پس زمینه دکمه مان به رنگ سبز ملایم، رنگ شود، کلاس bg-green-100 را اضافه می کنیم.
در مرحله بعد، بیایید متن را در دکمه استایل کنیم. برای این کار از کلاس متنی utility استفاده می کنیم. برای اضافه کردن متن به رنگ، کلاس text-green-100 را اضافه می کنیم، اما ویژگی های مربوط به رنگ باقی می مانند.
تا کنون دکمه ما خوب به نظر می رسد، بنابراین اکنون بیایید padding را به آن اضافه کنیم. نحوه کار با padding بسیار ساده است، به این صورت است که اول ویژگی، اندازه و سپس مقدار آن می آید.
این برای همه ویژگی ها مانند اندازه، فاصله و حاشیه اعمال می شود. برای اضافه کردن مقادیر به padding، کد به صورت pb-8 خواهد بود. این مقادیر از 0 تا 64 متغیر است. برای اینکه ببینید دامنه ها چگونه کار می کنند، می توانید آن ها را تست کنید.
در مثال ما، padding ما دارای مقادیر py-2 برای بالا و پایین، و px-6 برای چپ و راست خواهد بود. بیایید مقداری حاشیه هم در بالا، با my-20 و مقداری در سمت چپ با mx-20 اضافه کنیم.
اکنون، بیایید دکمه را با ابزار rounded utility گرد تر کنیم. می توانید فهرست کاملی از ابزار های مرزی شعاع و همه کلاس های آن ها را در مستندات بیابید. ما از شعاع مرزی 0.5em استفاده خواهیم کرد که مربوط به lg گرد است.
در نهایت، اجازه دهید مقادیر شناور به آن اضافه کنیم تا دکمه زنده تر شود. برای انجام این کار، کلاس‌های hover:hover:bg-green-600 و hover:text-green-200 را اضافه می کنیم.
با آن، ما دکمه خود را بدون CSS استایل داده ایم. نکته مهمی که باید به آن دقت کنید این است که فریم ورک Tailwind CSS تا چه حد به شما کنترل بر استایل و عناصر می دهد. در نهایت کد نهایی ما به این صورت است:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Section-Tailwind-Demo</title>
<link rel="stylesheet" href="css/tailwind.css" /
>
</head>
<body>
<button
type="button"
class="hover:bg-green-600 hover:text-green-200 bg-green-100 text-green-700 mx-20 my-20 px-6 py-2 rounded-lg"
>
Section
</button>
</body>
</html>
شکل نهایی کد (دکمه ما) باید به شکل روبرو باشد:
نتیجه:
فریم ورک Tailwind CSS یک تغییر دهنده بازی در نحوه استفاده ما از CSS است. همانطور که در بالا نشان داده شد، استفاده و یادگیری کلاس های مربوط به ابزار های آن بسیار آسان است. در نتیجه، اکنون باید بتوانید با استفاده از Tailwind CSS یک طرح بندی ساده بسازید.
Tailwind CSS به شما کنترل بیشتری بر ظاهری که می خواهید می دهد، که این می تواند یک مزیت یا یک نقطه ضعف باشد. با سایر فریم ورک ها، ظاهر پایه معمولا به اندازه ای خوب است، که یک توسعه دهنده شروع به کار کند. اما این ظاهر پایه در مورد Tailwind CSS نیست زیرا شما باید همه کار ها را خودتان انجام دهید.
منبع:
www.section.io
