I'm trying to install Tailwind on my React project.
I followed the instructions on https://tailwindcss.com/docs/guides/create-react-app and I'm using Windows10.
I tried to apply the color but it's not working.
My guess is that the codes below for index.css is wrong.
I get this orange wavy line under @tailwind and when I hover it, it says "Unknown rules @ tailwind".
I appreciate if anyone can help with this issue.

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

Here are my codes.

package.json

{
  "name": "react-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "uuid": "^8.3.2",
    "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.8",
    "postcss": "^8.4.16",
    "tailwindcss": "^3.1.8"
  }
}

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: [],
}

App.js

return (
  <div>
    <h1 >
      Hello!
    </h1>
  </div>

Thank you!

Screenshot added after posted.

CodePudding user response：

Are you importing the index.css file anywhere, either in your index.html or directly in the App.js file? If you are not, then add either:

App.js

import "../styles/index.css"

index.html

<link rel="stylesheet" href="../styles/index.css" />

This should fix your issue, assuming there are no other errors present.

CodePudding user response：

are you correct in the index.css path?

Add the @tailwind directives for each of Tailwind's layers to your

./src/index.css file.

and try to install PostCss Language Support

VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=csstools.postcss

CodePudding user response：

Install Tailwind CSS IntelliSense Extension to VS Code and follow the instructions then the warning will be gone -

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss