قطعا تا به حال برای شما هم سوال شده است که چگونه در ری اکت میتوان از tailwind استفاده کرد. به همین خاطر در این مقاله کوتاه قصد داریم آموزش نصب tailwind در react را مورد بحث و بررسی قرار دهیم.

چرا استفاده از کتابخانه تیلویند در ری اکت

Tailwind CSS اولین فریم ورک CSS کاربردی است که با انتخاب از کلاس‌های CSS آماده، استایل‌های عالی و زیبا را در برنامه React خود بسیار آسان می‌کند.

این رویکرد آسان، Tailwind CSS را در میان فریمورک‌های CSS امروزی بسیار محبوب کرده و روند توسعه و استایل را به میزان قابل توجهی سرعت می‌بخشد. اگر در Tailwind CSS تازه کار هستید، می توانید نقطه شروع خوبی را در صفحه اصلی پروژه در https://tailwindcss.com پیدا کنید.

آموزش استفاده از tailwind در react

خوب طبیعیست که در مرحله اول باید پروژه ری اکت خود را بسازید. یا از کامند های زیر استفاده کنید و یا از طریق لینک زیر، تمام راه حل های نصب ری اکت را بخوانید.

تمامی راه حل های نصب ری اکت و آموزش کامل vite

مطالعه اضافه بر سازمان

npx create-react-app parsaPro
cd parsaPro

حال وقت آن رسیده که با استفاده از NPM تیلویند را در پوشه node moduls خود نصب کنید. برای این منظور کامند زیر را بزنید:

npm install -D tailwindcss postcss autoprefixer

باید به صفحه ای مشابه زیر برسید:

پس از نصب تیلویند، معمولا دو فایل برای پیکربندی خواهیم داشت.

• tailwind.config.js
• postcss.config.js

برای ایجاد هر دو فایل بالا کامند زیر را بزنید:

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 مشابه زیر شود:

import `./index.css` export default function App() { return ( <div className="container mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10"> <p className="text-3xl text-gray-700 font-bold mb-5"> Welcome! </p> <p className="text-gray-500 text-lg"> React and Tailwind CSS in action </p> </div> ); }

کار تمام است! npm run start را زده و از نوشتن tailwind در react لذت ببرید.

در انتها دعوت میکنیم سری هم به مقاله زیر بزنید ♥

آموزش کامل و جامع فریم ورک tailwind

مطالعه اضافه بر سازمان

امیدواریم از این مقاله نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.