اگر در حال ساختن یک پروژه با استفاده از HTML، CSS و جاوا اسکریپت وانیلی هستید و می‌خواهید از رویکرد اول ابزار Tailwind CSS استفاده کنید، در جای مناسبی هستید. Tailwind را می توان به راحتی در یک پروژه بدون React یا فریمورک های فانتزی استفاده کرد. در اینجا یک راهنمای گام به گام برای افزودن Tailwind CSS به پروژه HTML خود با استفاده از روش‌های ساده و پیشرفته آورده شده است.
- ساده ترین راه: از Tailwind CDN استفاده کنید 🌐 سریعترین راه برای شروع استفاده از Tailwind CSS این است که پیوند شبکه تحویل محتوا (CDN) آن را به فایل HTML خود اضافه کنید. این رویکرد برای پروژه های سریع یا کوچک مناسب است.
مراحل:
تگ زیر را به فایل HTML خود در داخل اضافه کنید
بخش:
آیا می توانید فایل خود را ذخیره کرده و در مرورگر باز کنید؟ شما بلافاصله می بینید که یک ظاهر طراحی شده Tailwind اعمال شده است!
نکته: در حالی که CDN راحت است، همه ابزارهای Tailwind را شامل می شود که می تواند فایل را بزرگ کند.
- یک گزینه انعطاف پذیرتر: Tailwind را با مراحل NPM نصب کنید: پروژه خود را راه اندازی کنید:
یک پوشه پروژه ایجاد کنید و آن را با npm مقداردهی کنید:
mkdir tailwind-html
cd tailwind-html
npm init -y
Tailwind CSS را نصب کنید: Tailwind را به همراه PostCSS و Autoprefixer نصب کنید:
npm install tailwindcss postcss autoprefixer
npx tailwindcss init
پیکربندی Tailwind:
در فایل tailwind.config.js، محل فایل های HTML خود را مشخص کنید:
جاوا اسکریپتmodule.exports = {
content: ["./*.html"],
theme: {
extend: {},
},
plugins: [],
};
دستورات Tailwind را به یک فایل CSS اضافه کنید:
یک فایل style.css در ریشه پروژه خود ایجاد کنید:
CSS@tailwind base;
@tailwind components;
@tailwind utilities;
فایل CSS Tailwind را ایجاد کنید:
یک اسکریپت ساخت را در package.json اضافه کنید:
JSON"scripts": {
"build": "npx tailwindcss -i ./style.css -o ./dist/style.css --watch"
}
دستور build را برای تولید CSS کامپایل شده اجرا کنید:
ضربه شدیدnpm run build
پیوند CSS ایجاد شده در HTML خود: فایل CSS کامپایل شده را به HTML خود اضافه کنید:
html
شروع به کدنویسی با Tailwind: در صورت نیاز از کلاس های Tailwind در HTML خود استفاده کنید:
html
- For Command-Line Enthusiasts: Use the Tailwind CLI
The Tailwind CLI is a great alternative if you prefer avoiding npm dependencies while still having a custom build.
Steps:
Install the Tailwind CLI globally:
bash
Copy codenpm install -g tailwindcss
یک فایل CSS Tailwind ایجاد کنید:
یک فایل CSS ورودی (input.css) با محتوای زیر ایجاد کنید:
css
کد را کپی کنید@tailwind base;
@tailwind components;
@tailwind utilities;
از CLI برای کامپایل CSS استفاده کنید:
ضربه شدید
کد را کپی کنیدtailwindcss -i ./input.css -o ./output.css
CSS کامپایل شده را در HTML خود پیوند دهید:
html
کد را کپی کنید
چه زمانی از کدام روش استفاده کنیم؟
CDN: ایده آل برای آزمایش های سریع و نمونه های اولیه.
NPM: بهترین برای پروژه های مقیاس پذیر که می خواهید اندازه CSS را بهینه کنید.
CLI: مناسب برای تنظیمات سبک بدون نیاز به محیط کامل npm.
Tailwind CSS فوق العاده همه کاره است و می تواند به راحتی برای پروژه های ساده HTML تطبیق داده شود، چه در حال ساخت نمونه اولیه یا ساختن چیزهای پیشرفته تر باشید. با انتخاب روشی که متناسب با نیازهای شما باشد، می‌توانید پتانسیل کامل چارچوب ابزار اول Tailwind را در گردش کار خود باز کنید.
هر روش دیگه ای که تست شده و جواب داده میتونید بریزید👇😊
