6 replies

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

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

npm run dev

is:
warn - No utility classes were detected in your source files. If this is unexpected, double-check the

content

content

content

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;
  }
  /* ... */
}

@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: {},
  },
}

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],
    },
    /* ... */
  },
};

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"
}

"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.

TailwindCSS extended base style overridden by unknown style

Similar Threads

Similar Threads

Similar Threads