كيفية إستخدام Tailwind مع React؟

خطوات بسيطه وسهله بإذن الله 
1- قم بإنشاء مشروع ريأكت باستخدام create-react-app

2- قم بتثبيت tailwind 

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

3- قم بتثبيت CRACO من خلاله يمكنك التعديل على الاعدادات الخاصه ب PostCSS 

npm install @craco/craco

4- بعد تثبيت CRACO قم بالتوجه الى فايل package.json و عدل الجزء الخاص بال scripts حتى يكون كالتالي: 

"scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
    }

5- بعد ذلك في المسار الرئيسي (root path) لمشروعك قم بإنشاء فايل بإسم craco.config.js وأضف إليه الكود التالي: 

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

6- قم بتشغيل الامر التالي لانشاء الملف المسئول عن إعدادات tailwind 

npx tailwindcss init

7- بعد تشغيل الامر السابق قم بفتح الملف tailwind.config.js 

وعدل قيمة ال purge الى التالي: 

 purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],

8- بعد ذلك قم بفتح ملف index.css الموجود داخل فولدر src الذي يتم إنشاءه تلقائيا باستخدام create-react-app وأضف إليه الكود التالي: 

@tailwind base;
@tailwind components;
@tailwind utilities;

9- الخطوة الأخيره تأكد من عمل import لملف index.css داخل ملف ال index.js الموجود أيضا داخل فولدر src والذي يتم إنشاءه تلقائيا أيضا 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // هذا الملف الذي عدلناه مسبقا
import App from './App';
import reportWebVitals from './reportWebVitals';

  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  );

وبهذا يمكنك إستخدام tailwind مع React وإذا أردت إنشاء ملفات css دون إستخدام tailwind لبعض التخصيص الغير متاح في tailwind يمكنك إنشاء الملف بطريقة عاديه ومن ثم عمل import له في ملف ال index.css بعد ال @tailwind utilites 

أول قم بإنشاء مشروع React إن لم يكن لديك واحد بالفعل:

npx create-react-app react-tailwindcss && cd react-tailwindcss

لكي تستطيع تثبيت وإستخدام tailwind بشكل جيد وعملي سنقوم بتثبيت كل من tailwindcss و postcss-cli  و autoprefixer:

npm install tailwindcss postcss-cli autoprefixer -D

PostCSS هي أداة لتحويل تنسيقات CSS باستخدام إضافات JS. يمكن لهذه المكونات الإضافات فحص CSS، ودعم المتغيرات وmixins، وتحويل بنية CSS الحديثة، وتصمين الصور، إلخ.

بينما autoprefixer تقوم بإضافة prefix لبعض خصائص CSS لكي تدعم بعض الإصدارات القديمة من متصفحات الويب.

ثم نقوم بعمل ملف tailwind config من خلال الأمر:

npx tailwind init tailwind.js --full

ثم سنحتاج إلى ملف postcss.config.js لضبط إعدادات postcss حتى يعمل مع tailwind:

touch postcss.config.js

وسنقوم بكتابة التالي فيه:

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

بعد ذلك عليك عمل ملف tailwind.css ووضعه في أي مكان تريد وضع فيه مكوانات tailwdind:

@tailwind base;

@tailwind components;

@tailwind utilities;

وإستدعائه في مكونات React أو في داخل ملف scss بشكل عادي، وستحتاج أيضًا تعديل scripts في ملف package.json:

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

بهذا سيكون tailwind قد تم تثبيته بنجاه ويمكنك أستعمال كل classes الخاصة به.

بالتوفيق.