some tailwind properties not working as expected

[I-am-Pritam-20]

I am facing some issues while defining CSS properties for the elements In my React + Vite Project with Tailwind included. 😭😭

Issue Description:

<p className = "text-center md:text-left mt-20">Testing It<p/>

• While I am defining mt-20 in the above code it is not actually getting applied.

• But when I do the thing in global.css by doing (adding a custom class name , here test-text) and define the property as follows:

<p className = "text-center md:text-left test-text">Testing It<p/>

and in global.css

.test-test{
  margin-top: 80px;
}

It works perfectly.

What could be the cause ? Any help is appreciated 😊

Here is the package.json

{
  "name": "test_website",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.5.10",
    "@tailwindcss/vite": "^4.1.12",
    "lucide-react": "^0.536.0",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-router-dom": "^7.7.1",
    "react-transition-group": "^4.4.5",
    "tailwindcss": "^4.1.12"
  },
  "devDependencies": {
    "@eslint/js": "^9.30.1",
    "@types/react": "^19.1.8",
    "@types/react-dom": "^19.1.6",
    "@vitejs/plugin-react": "^4.6.0",
    "eslint": "^9.30.1",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "vite": "^7.0.4"
  }
}

[wongjn]

Consider checking:

• You've followed the installation instructions correctly.
• You've done a git init in the root folder of the project. Tailwind uses git ignore rules internally for automatic source detection. If you have a .gitignore (or equivalent) higher in the directory tree, this may cause Tailwind to ignore files. Initializing a git repo creates a boundary to this.

Otherwise, consider providing a git repo that reproduces the unexpected behavior and we can take a look for you.

[I-am-Pritam-20]

Yes, actually while a vite project is created a .gitignore file gets generated automatically. Although I have not initialized any git repo manually in the root directory of the project. And yes I've followed the installation instructions thoroughly.

I followed these methods:

npm create vite@latest testtailwindapp --template react

Select a framework:
React

Select a variant:
JavaScript

And you can see a .gitignore file will be getting created automatically. I also did not change anything in that (All are by default).

I will provide a repo shortly for reproduction of the issue.

[wongjn]

The .gitignore in the project is of little consequence. I was mentioning any .gitignore files higher in the directory tree of the project. Again, consider initializing a git repo (git init) in case it solves your issue.

[I-am-Pritam-20]

Exactly how much higher? 😅. Because the directory tree is this much only: D:/testtailwindapp/testtailwindapp

There is no .gitignore in D:/ and not any in the D:/testtailwindapp/ . Only one inside the last one that is initiated through the vite command.

And also other properties(the ones I have used till now) are working, only margin, padding these two are not working . So I have to define a custom class name and then in global.css I have to add the padding or margin for the defined class

[wongjn]

Consider checking if you have some custom rule like:

* {
 padding: 0;
 margin: 0;
}

This would override any Tailwind utilities regarding padding or margin. You shouldn't need this rule anyway since this is included in Tailwind's preflight.

Otherwise, consider providing a git repo that reproduces the unexpected behavior and we can take a look for you.