Как установить React, TypeScript и TailWindcss v4 с использованием postcss ⇐ Javascript

[Anonymous]

Я попытался настроить новый проект с помощью React, TypeScript и Tailwind V4, но Tailwind не применяется. < /p>
Вот моя установка: < /p>

Код: Выделить всё

npx create-react-app web
npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest
npx tsc --init
npm install --save-dev tailwindcss @tailwindcss/postcss postcss

Я мог бы использовать NPX Create-React-App Web-tymplate TypeScript , но этот способ помещает TypeScript в производственные зависимости. Вот почему я использовал свои первые шаги.

Код: Выделить всё

export default {
plugins: {
"@tailwindcss/postcss": {},
}
}

Затем, в src/index.css , я удалил все стили и добавил только эту строку:

Код: Выделить всё

@import "tailwindcss";

Теперь я изменил расширение приложения с app.js на app.tsx с этим примером кода:

Код: Выделить всё

function App() {
return (

Hello world!

);
}

export default App;

И это это index.tsx :

Код: Выделить всё

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(



);

reportWebVitals();

Теперь я запускаю npm start , но не применяется CSS -ветра. /> Версии: < /p>

Код: Выделить всё

"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"tailwindcss": "^4.0.12",
"postcss": "^8.5.3",

Я пропустил шаг?


Подробнее здесь: https://stackoverflow.com/questions/795 ... ng-postcss