Tailwind classes doesn't work in vite react project

Issue

I have created a vite project with react + typescript using npm create vite@latest. And after that to add tailwind to the project, I followed the steps in the tailwind documentation.

Here is the (minimal) code:

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.${js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

And there are some warnings in the terminal:

warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
warn - https://tailwindcss.com/docs/content-configuration

But I think there is no problem in the tailwind.config.js. (If you think I have missed something (code above) please post it as an answer).

The page seems to be loaded taliwindcss because it changed. (like the font size decreased, default margins removed and default font changed).

But the problem is, the classes font-extrabold and text-rose-700 doesn't seems to be taking an effect.

I found many questions mentioning the same problem in stack overflow. Some of them have accepted answers. I tried almost all of them but nothing solved my problem.

Solution

Removing unnecessary $ in tailwind.config.js's content path solved the problem.

content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],

Answered By - Usitha Indeewara