Kevin Powell - Community•11mo ago

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•11mo ago

Search for "data-styled-version" says its probably from "styled-components": https://styled-components.com/releases

Atmahana•11mo ago

yes and that is why it's quite frustrating for me since I didn't install styled-components for the project

Wolle•11mo 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•11mo ago

Both of the files shown no result. Maybe the culprit is not the styled-components?

Wolle•11mo 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•11mo 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.

Gaming

Programming

TailwindCSS extended base style overridden by unknown style