TailwindCSS extended base style overridden by unknown style

Hello everyone. I had an issue with my React + Tailwind + Vite project. The problem is that I tried to extend the base style of my heading elements (h1, h2, ...) and somehow only the font-size is not being styled properly. I checked on the browser developer tools, the font size is overridden by CSS that I didn't write (see attached image). I tried to: 1) Clear the cache 2) Remove node_modules completely and rerun npm install 3) Check for styled-components usage (there is none in my project) 4) Making sure I installed Tailwind correctly (https://tailwindcss.com/docs/guides/vite) 5) Asking ChatGPT for possible solutions The only warning I got when running npm run dev is: warn - No utility classes were detected in your source files. If this is unexpected, double-check the content option in your Tailwind CSS configuration. index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
h1 {
@apply text-5xl font-serif;
}
h2 {
@apply text-4xl font-serif;
}
/* ... */
}
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
h1 {
@apply text-5xl font-serif;
}
h2 {
@apply text-4xl font-serif;
}
/* ... */
}
postcss.config.js
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
tailwind.config.js
export default {
content: [
"./index.html",
"./src/**/*.{js,jsx}",
],
theme: {
fontFamily: {
sans: ["Barlow Condensed", ...defaultTheme.fontFamily.sans],
serif: ["Bellefair", ...defaultTheme.fontFamily.serif],
},
/* ... */
},
};
export default {
content: [
"./index.html",
"./src/**/*.{js,jsx}",
],
theme: {
fontFamily: {
sans: ["Barlow Condensed", ...defaultTheme.fontFamily.sans],
serif: ["Bellefair", ...defaultTheme.fontFamily.serif],
},
/* ... */
},
};
package.json
"devDependencies": {
"autoprefixer": "^10.4.14",
"postcss": "^8.4.27",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
"devDependencies": {
"autoprefixer": "^10.4.14",
"postcss": "^8.4.27",
"tailwindcss": "^3.3.3",
"vite": "^4.4.5"
}
Would be a huge help if anyone here know why is this happens and how to resolve it. Thank you! Repository: https://github.com/atmahana/space-tourism-fem Some references: - https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles - https://www.geeksforgeeks.org/how-to-fix-configuration-issue-if-tailwind-css-not-working-with-next-js/
Install Tailwind CSS with Vite - Tailwind CSS
Setting up Tailwind CSS in a Vite project.
GitHub
GitHub - atmahana/space-tourism-fem
Contribute to atmahana/space-tourism-fem development by creating an account on GitHub.
GeeksforGeeks
How to Fix Configuration Issue if Tailwind CSS Not Working with Nex...
A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
Adding Custom Styles - Tailwind CSS
Best practices for adding your own custom styles to Tailwind.
6 Replies
Wolle
Wolle16mo ago
Search for "data-styled-version" says its probably from "styled-components": https://styled-components.com/releases
Atmahana
Atmahana16mo ago
yes and that is why it's quite frustrating for me since I didn't install styled-components for the project
Wolle
Wolle16mo ago
Did you check your package.json if it accidentally got in there? If not the lockfile may have it listed as a dependency somewhere.
Atmahana
Atmahana16mo ago
Both of the files shown no result. Maybe the culprit is not the styled-components?
Wolle
Wolle16mo ago
My last idea is to check whats in your index.html maybe there is a script tag, that should not be there. The last thing I can think of is to create a new Project, copy over all your code, then add dependencies one at a time and check after which the style tag appears. Sorry if I couldn't help you, I have never encountered anything like that.
Atmahana
Atmahana16mo ago
Hey no worries man. Thank you for taking your time to troubleshoot this problem with me, cheers. And apparently this problem only being produced on Chrome, I tried on Firefox and that unknown css is not there. I don't know why this happend but after countless troubleshoots I guess it is solved now.
Want results from more Discord servers?
Add your server