This example shows how to use Tailwind CSS (v3.0) with Next.js. It follows the steps outlined in the official Tailwind docs.
Install yarn by running npm i yarn.
Run yarn install or npm install to install all the required dependencies.
Run yarn dev or npm run dev to start the development server on localhost:3000.
Run yarn build or npm run build to build the project, and yarn start or npm run start to run the project.
This project uses the combination of MUI for UI components, emotion as the styled engine for MUI and TailwindCSS.
The current configuration allows TailwindCSS to be injected at the bottom of the <head></head> tag, overwriting styles from MUI while still maintaining the effect of inline style.
This is achieved by adding the class
'#__next'before TailwindCSS, allowing it to take precedence over MUI.