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
postcss.config.js
tailwind.config.js
package.json
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
Search for "data-styled-version" says its probably from "styled-components": https://styled-components.com/releases
yes and that is why it's quite frustrating for me since I didn't install styled-components for the project
Did you check your package.json if it accidentally got in there? If not the lockfile may have it listed as a dependency somewhere.
Both of the files shown no result. Maybe the culprit is not the styled-components?
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.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.