Docusaurus and TailwindCss

Question

I setup Docusaurus with TailwindCss based on this tutorial and I got everything working.

The issue I have now is that some of the styling applied to my actual docs are now missing. The headers are not styled correctly and they also do not have the link anchor functionality attached to it.

I can confirm that when I comment out the tailwind imports in the css

@tailwind base;
@tailwind components;
@tailwind utilities;

The docs styling comes back and works as expected. Does anyone know what's happening? If not, does anyone know how to "exclude" components on a css import, maybe those are causing some issues.

Answer 1

I assume this is because of the preflight applied by the tailwind-css.

Built on top of modern-normalize, Preflight is a set of base styles for Tailwind projects that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system. Tailwind automatically injects these styles when you include @tailwind base in your CSS:

module.exports = {
  corePlugins: {
    preflight: false,
  }
}