قطعا تا به حال برای شما هم سوال شده است که چگونه در ری اکت میتوان از tailwind استفاده کرد. به همین خاطر در این مقاله کوتاه قصد داریم آموزش نصب tailwind در react را مورد بحث و بررسی قرار دهیم.
Tailwind CSS اولین فریم ورک CSS کاربردی است که با انتخاب از کلاسهای CSS آماده، استایلهای عالی و زیبا را در برنامه React خود بسیار آسان میکند.
این رویکرد آسان، Tailwind CSS را در میان فریمورکهای CSS امروزی بسیار محبوب کرده و روند توسعه و استایل را به میزان قابل توجهی سرعت میبخشد. اگر در Tailwind CSS تازه کار هستید، می توانید نقطه شروع خوبی را در صفحه اصلی پروژه در https://tailwindcss.com پیدا کنید.
خوب طبیعیست که در مرحله اول باید پروژه ری اکت خود را بسازید. یا از کامند های زیر استفاده کنید و یا از طریق لینک زیر، تمام راه حل های نصب ری اکت را بخوانید.
مطالعه اضافه بر سازمان
npx create-react-app parsaPro
cd parsaPro
حال وقت آن رسیده که با استفاده از NPM تیلویند را در پوشه node moduls خود نصب کنید. برای این منظور کامند زیر را بزنید:
npm install -D tailwindcss postcss autoprefixer
باید به صفحه ای مشابه زیر برسید:
پس از نصب تیلویند، معمولا دو فایل برای پیکربندی خواهیم داشت.
برای ایجاد هر دو فایل بالا کامند زیر را بزنید:
npx tailwindcss init -p
فایل tailwind.config.js را باز کرده و کد زیر را در آن قرار دهید. با این کار ما مطمئن می شویم که تمام فایل های قالب با پسوند فایل js، jsx، ts و tsx در زیر پوشه src پوشانده شده اند.
module.exports = {
content: [
“./src/*/.{js,jsx,ts,tsx}”,
],
theme: {
extend: {},
},
plugins: [],
}
یک فایل به نام index.css در پوشه src ساخته، محتویات زیر را در آن ریخته و آن را در App.jsx ایمپورت کنید.
@tailwind base;
@tailwind components;
@tailwind utilities;
به نوعی که فایل App.jsx مشابه زیر شود:
Welcome!
React and Tailwind CSS in action
کار تمام است! npm run start را زده و از نوشتن tailwind در react لذت ببرید.
در انتها دعوت میکنیم سری هم به مقاله زیر بزنید ♥
مطالعه اضافه بر سازمان
امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.