نصب و تنظیمات Tailwind CSS در React

مقدمه

احتمالا اگه اینجا آمدید می‌دونید Tailwind CSS چیه و ... همچنین React.

پس وقتتون تلف نمی‌کنم (البته خودمم هم حصله ندارم!) مستقیم می‌ریم برای نصب و تنظیمات Tailwind در React.

نصب و تنظیمات

1. اول یک پروژه React با استفاده از create-react-app ایجاد کنیم:

npx create-react-app install-tailwindcss

2. بریم داخل فایل پروژه:

cd install-tailwindcss

3. حالا باید Tailwind CSS به پروژه اضافه کنیم:

yarn add tailwindcss postcss-cli autoprefixer -D

4. پیشنهاد می‌کنم پروژه روی IDE بالا بیارید:

code .

5. خوب حالا باید دستور زیر بزنیم بعد از پایانش یه فایل به اسم tailwind.config.js داخل پروژه ایجاد می‌شه:

npx tailwind init tailwind.config.js --full

6. حالا یک فایل به اسم postcss.config.js درست کنید و تنظیمات زیر داخلش قرار بدید:

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

7. اوکی حالا یه فولدر به اسم styles داخل فولدر src ایجاد کنید. داخل این فولدر دو فایل به اسم های main.css و taillwind.css ایجاد کنید:

حالا داخل فایل tailwind.css باید import های زیر قرار بدید (احتمالا IDE چون تگ tailwind نمی‌شناسه hint بده ولی مهم نیست) :

@tailwind base;

@tailwind components;

@tailwind utilities;

8. خوب حالا در فایل package.json باید بخش scripts با object زیر تغییر دهید :

"scripts": {
     "start": "npm run build:css && react-scripts start",
     "build": "npm run build:css && react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css"
},

9. آخرین مرحله باید داخل فایل app.js فایل main.css را import کنید:

import './styles/main.css';

خوب تنظیمات تموم شد. فقط کافیه اگه از قبل npm start کردید ، یکبار دیگه این کار رو انجام بدید. برای اطمینان از درست بودن تمامی تنظیمات به app.js برید و return زیر به جای قبلی قرار بدید:

return (
    <div className="">
      <div className="p-4 m-4 bg-green-700">
        <h1 className="text-2xl font-bold text-white">Tailwind CSS Demo</h1>
      </div>
      <div className="p-4 m-4 bg-green-100 h-full">
        <h2 className="text-green-900">Have much fun using Tailwind CSS</h2>
        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">My Tailwind Button</button>
      </div>
    </div>
);

اگه تنظیمات درست باشه باید صفحه ای به شکل زیر ببینید:

نصب و تنظیمات بر اساس این ویدیو بود:

https://www.youtube.com/watch?v=hRFbqdJKRvQ&t=109s

امیدوارم مفید بوده باشه. اگه سوالی هم داشتید ایمیل و تویتتر توی پروفایل هست.