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

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.

KP-C

Kevin Powell - Community•3y ago•

6 replies

Atmahana

TailwindCSS extended base style overridden by unknown style

npm install

npm install

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

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

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

Adding Custom Styles - Tailwind CSS

Best practices for adding your own custom styles to Tailwind.

TailwindCSS extended base style overridden by unknown style

TailwindCSS extended base style overridden by unknown style

Similar Threads

Similar Threads

Similar Threads