Установка Tailwind в create-react-app

🚀 Установка Tailwind в CRA

1. Создаём проект

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

---

2. Ставим Tailwind + PostCSS

npm install -D tailwindcss postcss autoprefixer

---

3. Инициализация Tailwind

У тебя с npx tailwindcss init -p проблема была, поэтому сразу создаём конфиги вручную:

tailwind.config.js

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

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

---

4. Настраиваем CSS

В src/index.css добавь в самое начало:

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

---

5. Подключаем стили

Убедись, что в src/index.js уже есть строка:

import "./index.css";

(она в CRA по умолчанию есть).

---

6. Проверяем

В src/App.js напиши тестовый компонент:

function App() {
  return (
    <div className="h-screen flex items-center justify-center bg-gray-900 text-white text-4xl">
      Hello Tailwind 🚀
    </div>
  );
}

export default App;

---

7. Запуск

npm start

Должен открыться браузер с чёрным экраном и надписью Hello Tailwind 🚀.