فریمورک Tailwind CSS چیست؟

CSS تکنولوژی است که به شما کمک می کند به زیباسازی صفحات HTML خود بپردازید. شما برای ایجاد صفحات وب از زبان نشانه گذاری HTML استفاده می کنید اما HTML خام به تنهایی دارای زیبایی خاصی نیست، به همین دلیل با استفاده از قواعد CSS می توانیم به HTML و صفحات وب روح ببخشیم و آن ها را زیباتر کنیم. اما در پروژه های بزرگ ممکن است نوشتن قواعد CSS از ابتدای کار سختی و نادرستی باشد به همین دلیل باید از فریمورک های CSS استفاده کنیم. این فریمورک ها قواعد از پیش تعریف شده ای دارند که تنها باید آنها را در صفحات HTML خود اعمال کنیم. برخی از معروف ترین فریمورک های CSS عبارت اند از: Bootstrap ، Bulma ، Materialize ، Foundation ، Pure

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

Tailwind CSS چیست؟

tailwind css فریمورک جدید زبان CSS است با تفاوت های زیاد نسبت به سایر فریمورک های CSS ، تفاوت اصلی این فریموک با سایر رقبا نبود هیچ قالب پیش فرض و از پیش تعریف شده در آن است! یعنی در آن هیچگونه کامپوننت آماده ای برای رابط کاربری وجود ندارد چون هدف اصلی Tailwind CSS کمک به شما برای ساخت رابط کاربری های سفارشی است نه رابط کاربری های آماده پس اگر فریمورکی نیاز دارید که ابزارهای آماده جهت کمک به شما داشته باشد نباید سمت Tailwind برید! اما اگر قصد دارید رابط کاربری پیشرفته طبق نیاز و سلیقه خودتان بسازید قطعا Tailwind CSS بهترین انتخاب برای شماست این ویژگی Tailwind یعنی عدم وجود کامپوننت های آماده، باعث می شود تا سایت های ایجاد شده با آن مانند سایت های ساخته شده با Bootstrap ظاهر شبیه به هم نداشته باشند.

تفاوت Tailwind CSS با سایر فریمورک های CSS

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

Tailwind CSS به جای Component ها، کلاس های کاربردی را در اختیار شما می گذارد تا بتوانید بدون ترک کد اصلی HTML خود، طرح سفارشی خود را کامل ایجاد کنید.

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

ویژگی های Tailwind CSS

ابزارهای Responsive

المان های موجود همگی دارای ویژگی واکنشگرایی هستند و ساخت رابط کاربری های ریسپانسیو بسیار آسان است.

Component-friendly

اگرچه شما می توانید با کلاس ها کارهای زیادی انجام دهید اما با بزرگ شدن پروژه می توانیم پترن های پر استفاده را تبدیل به کامپوننت کنیم که Tailwind ابزارهایی جهت استخراج کلاس های پرکاربرد دارد و می تواند بروزرسانی دوباره آن کلاس ها در سطح پروژه را با تبدیل به یک کامپوننت برای شما بسیار آسان کند.

ساخت رابط کاربری سفارشی

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

Tailwind در PostCSS نوشته شده و در جاوااسکریپت پیکربندی شده است. این یعنی شما از قدرت یک زبان برنامه نویسی در نوک انگشتان خود بهره می برید :)

در واقع Tailwind فراتر از یک فریمورک CSS است درواقع موتور و سیستمی برای طراحی است.

روش نصب و استفاده از Tailwind CSS

نصب Tailwind CSS با NPM

در اغلب پروژه ها می توانید tialwind را با دستور زیر از طریق npm نصب کنید.

# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss

اضافه کردن Tailwind به پروژه

از دستورات زیر برای اضافه کردن Tailwind به CSS استفاده کنید.

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

البته اگر از postcss-importer استفاده می کنید که در ابزارهای مانند React استفاده شده است باید به صورت زیر Tailwind را به پروژه اضافه کنید.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

ایجاد فایل Tailwind Config

اگر قصد دارید تنظیمات tailwind را خودتان کانفیگ کنید می توانید در هنگام نصب از دستور init استفاده کنید.

npx tailwindcss init

فایل کانفیگ ایجاد شده مانند زیر است:

// tailwind.config.js
module.exports = { purge: [], theme: { extend: {}, }, variants: {}, plugins: [],
}

استفاده Tailwind CSS با PostCSS

در بیشتر پروژه ها ، شما می خواهید Tailwind را به عنوان یک پلاگین PostCSS در زنجیره ساخت خود اضافه کنید، در فایل postcss.config.js خود باید به صورت زیر عمل کنید:

module.exports = { plugins: [ // ... require('tailwindcss'), require('autoprefixer'), // ... ]
}

استفاده از tailwindcss در React

روش اضافه کردن Tailwind CSS به پروژه React

module.exports = { plugins: [ // ... require('tailwindcss'), require('autoprefixer'), // ... ]
}

یا می توانید آن را مستقیم در فایل webpack.config.js قرار دهید:

// webpack.config.js
module.exports = { // ... module: { rules: [ { // ... use: [ // ... { loader: 'postcss-loader', options: { ident: 'postcss', plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, ], } ], }
}

بیا نتیجه بگیریم

Tailwind CSS یک فریمورک جدید CSS است که با سایر رقبا خود متفاوت است زیرا هیچ کامپوننت رابط کاربری به صورت پیش فرض در آن وجود ندارد! اگر قصد دارید رابط کاربری پروژه خود را به صورت سفارشی طراحی کنید قطعا tailwind بهترین انتخاب برای شماست زیر امکاناتی در اختیار شما قرار می دهد که می توانید بهترین رابط کاربری طبق نیاز و سلیقه خودتان را در کمترین زمان ممکن طراحی کنید. این فریمورک دارای ویژگی ریسپانسیو است و کامپوننت محور! یعنی می توانید موارد پر استفاده در پروژه خود را جهت آپدیت سریع تر و استفاده راحت تر تبدیل به کامپوننت کنید تا بتوانید از آن مجدد استفاده کنید. اگر تجربه کار با این فریمورک CSS را دارید با ما و سایر کاربران به اشتراک بگذارید.