درس ۲: راهنمای کامل نصب و راهاندازی Tailwind CSS
درس ۲: راهنمای کامل نصب و راهاندازی Tailwind CSS
برای شروع کار با
Tailwind CSS،
انتخاب روش نصب درست بسیار اهمیت دارد. در این درس، ۳ روش اصلی نصب را از سطح مبتدی تا حرفهای بررسی میکنیم.
۱. استفاده از Play CDN (سریعترین روش)
اگر میخواهید بدون درگیری با ترمینال و نصب پکیج، فقط تیلویند را امتحان کنید، این روش عالی است. کافیست اسکریپت زیر را در
<head>
فایل HTML خود قرار دهید:
۲. نصب از طریق Tailwind CLI (روش استاندارد)
بهترین و بهینهترین روش برای اکثر پروژهها استفاده از ابزار خط فرمان یا
CLI
است.
مراحل اجرایی در ترمینال:
- نصب پکیج:npm install -D tailwindcss
- ایجاد فایل تنظیمات:npx tailwindcss init
- تنظیم مسیرها: در فایل
tailwind.config.js، آدرس فایلهای HTML یا JS خود را وارد کنید تا تیلویند آنها را اسکن کند.
۳. استفاده از PostCSS (روش حرفهای)
اگر از ابزارهایی مثل
Webpack
یا
Vite
استفاده میکنید، بهتر است تیلویند را به عنوان یک پلاگین
PostCSS
نصب کنید. این کار اجازه میدهد تیلویند با سایر ابزارهای پیشپردازنده شما (مثل Autoprefixer) ترکیب شود.
خروجی نهایی پس از نصب موفق
پس از نصب، شما میتوانید کلاسهای قدرتمند تیلویند را با هم ترکیب کنید. به مثال زیر دقت کنید:
نمونه المان طراحی شده پس از نصب:
تحلیل کد مثال بالا:
در این المان از ترکیب کلاسهای bg-gradient-to-br (گرادینت قطری)، rounded-full (گرد کردن کامل لبهها) و shadow-xl استفاده شده است.