reactjs - create-react-app με TypeScript & Tailwind CSS· οι κλάσεις βοηθητικού υλικού του Tailwind δεν εφαρμόζονται

Έχω ψάξει παντού για να προσπαθήσω να λύσω αυτό το πρόβλημα. Δημιούργησα μια εφαρμογή React με TypeScript και εγκατέστησα το Tailwind CSS χρησιμοποιώντας τη ρύθμιση για React που εμφανίζεται στην ιστοσελίδα του Tailwind εδώ.

Παρακάτω είναι ο κώδικας και οι ρυθμίσεις μου. Εκτελείται με επιτυχία όταν κάνω npm run start, αλλά τα στυλ του Tailwind δεν εφαρμόζονται.

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="items-center justify-center">
    <h1 className="text-3xl font-bold underline">
      Testing
    </h1>
    </div>
  );
}

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(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();

index.css

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

postcss.config.js

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

tailwind.config.js

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

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

πακέτο.json

{
  "name": "mortgage-calc",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.43",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "typescript": "^4.7.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "autoprefixer": "^10.4.7",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.5"
  }
}

Η έξοδός μου

Απάντηση #1

Προσπάθησε να αφαιρέσεις τα κενά μεταξύ των τελειωμάτων αρχείων στο tailwind.config.js σου:

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

Αν αυτό δεν διορθώσει το πρόβλημά σας, προσπαθήστε να αφαιρέσετε την εισαγωγή CSS στο App.tsx σας:

import React from 'react';
import logo from './logo.svg';

function App() {
  return (
    <div className="items-center justify-center">
    <h1 className="text-3xl font-bold underline">
      Testing
    </h1>
    </div>
  );
}

export default App;