Як додати Tailwind CSS до React-додатку

Tailwind CSS — це CSS-фреймворк з орієнтацією на утиліти, що дозволяє швидко розробляти інтерфейси користувача. Ось посібник по інтеграції Tailwind CSS у вашому React-додатку.

1. Створіть React додаток — якщо у вас ще немає проекту на React, створіть його за допомогою або перегляньте Посібник для початківців по React.

npx create-react-app my-app  
cd my-app

1. Встановіть Tailwind CSS та необхідні залежності

npm install -D tailwindcss postcss autoprefixer  
npx tailwindcss init

Це створить файл tailwind.config.js для налаштування Tailwind CSS.

1. Налаштуйте Tailwind, відредагуйте файл tailwind.config.js, щоб вказати шляхи до файлів вашого React-додатку:

/** @type {import('tailwindcss').Config} */  
module.exports = {  
 content: [  
 "./src/**/*.{js,jsx,ts,tsx}",  
 ],  
 theme: {  
 extend: {},  
 },  
 plugins: [],  
};

1. Додайте Tailwind до CSS, замінивши вміст src/index.css на базові стилі Tailwind:

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

1. Тестування коду — тепер ви можете використовувати класи Tailwind CSS у своїх компонентах React. Ось приклад базового компонента.

import React from 'react';  

function App() {  
 return (  
    <button className="bg-blue-500 text-white p-4 rounded">Click Me</button>        
    );  
}  
export default App;

Запустіть сервер розробки, щоб побачити, як працює Tailwind.

npm start

Висновок

Tailwind CSS успішно додано до вашого React додатку! Завдяки підходу "utility-first", ви можете швидко створювати відгукливі та візуально привабливі інтерфейси. Для більш детальних налаштувань та додаткових функцій ознайомтесь з документацією Tailwind. Щасливого кодування!

Перекладено з: How to Add Tailwind CSS to a React App