Skip to main content

Part 4: Configure Styling - The Tailwind Taming

· One min read
Mike Stabile
Mike Stabile
AI Integration Specialist & Developer

Docusaurus has opinions about styling. Tailwind CSS has opinions about styling. Getting these two opinionated systems to coexist peacefully requires diplomacy.

Step One: Installation​

npm install -D tailwindcss@3.4.1 postcss autoprefixer

Important: Use Tailwind v3, not v4 (compatibility issues with Docusaurus as of 2025).

Step Two: Configuration​

tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx,md,mdx}",
    "./docs/**/*.{md,mdx}",
  ],
  darkMode: ['class', '[data-theme="dark"]'],
  corePlugins: {
    preflight: false, // CRUCIAL!
  },
};

The Z-Index Wars​

If modals appear behind the navbar:

.modal-overlay {
  z-index: 9999 !important;
}

Dark Mode Considerations​

Docusaurus uses data-theme attribute. Configure Tailwind to respect it.

Next: Part 5 - Migrate Components to Pages: The Transformation