Using Tailwind together with Nextra

As nextra is already using tailwindcss, there are potentially specificity problems when using another copy of tailwindcss. Such a problem can arise from the tailwind css reset already being included by nextra. To avoid this, you can use the important option in your tailwind.config.js file. In this case we set it to #__next as this is the id of the root element.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  important: "#__next",
};

This solution can also help with any other framework/theme/template that already uses tailwind.