نصب و تنظیمات 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 زیر تغییر دهید :

&quotscripts&quot: {
     &quotstart&quot: &quotnpm run build:css && react-scripts start&quot,
     &quotbuild&quot: &quotnpm run build:css && react-scripts build&quot,
     &quottest&quot: &quotreact-scripts test&quot,
     &quoteject&quot: &quotreact-scripts eject&quot,
     &quotbuild:css&quot: &quotpostcss src/styles/tailwind.css -o src/styles/main.css&quot
},

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

import './styles/main.css';

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

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

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

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

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

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