How to setup TailwindCSS in Nextra App

Like you, I was also trying to configure TailwindCSS in my new Nextra web app and i was following the official documentation of Nextra and TailwindCSS to configure it. I followed all the steps mentioned in the documentation, but it was not working. I tried many things, but nothing worked.

Then, I found a question on StackOverflow that gave me a bit reference about the issue. Enough of the story, let's get to the point.

Solution

To make TailwindCSS work in your new Nextra web app, you need to follow the below steps:

Step 1

Inside the pages or app folder create a new file called _app.mdx and add the following code:

import '../globals.css'
 
// this should be your globals.css which must contain
// @tailwind base; @tailwind components; @tailwind utilities;
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

Step 2

Just install TailwindCSS in your Next.js app as you usually would, follow the above steps, and that's it — you're all set 🥳.

Folder structure for reference

pages/
└── _app.mdx
node_modules/
.gitignore
package.json
tailwind.config.js
postcss.config.js
globals.css