Search code examples
reactjstailwind-cssdocusaurus

Docusaurus and Tailwind CSS

I set up Docusaurus with Tailwind CSS based on this tutorial and I got everything working.

The issue I have now is that some of the styling applied to my actual documentation 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 CSS imports in the CSS

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

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

Solution

  • I assume this is because of the preflight applied by 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,
  }
}