Як додати Tailwind CSS до вашого проекту на React за допомогою Vite.

1- Встановлення Tailwind CSS

Відкрийте термінал і виконайте команду:

npm install -D tailwindcss postcss autoprefixer

2. Ініціалізація конфігурації Tailwind

npx tailwindcss init -p

Це створить файли tailwind.config.js та postcss.config.js.

3. Налаштування шляхів до шаблонів

Відредагуйте файл tailwind.config.js, щоб він виглядав так:

module.exports = {  
 content: [  
 "./index.html",  
 "./src/**/*.{js,ts,jsx,tsx}",  
 ],  
 theme: {  
 extend: {},  
 },  
 plugins: [],  
};

4. Додавання директив Tailwind

У файлі src/index.css додайте:

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

5. Перезапуск серверу

npm run dev

Тепер Tailwind CSS готовий до використання!

Дякуємо за прочитання🙌

Перекладено з: How To Add Tailwind CSS To Your React Vite Project.