Server Side Rendering of Tailwind CSS styles in NextJS
11/8/2022 •3.9K views •2 min read
NextJS provides us with SSR capabilities by rendering the page in the server.
Although, if you are Tailwind for styling, you'll notice that the styles are not applied on the server rendered pages.
For this to work, we need to enable an experimental feature in
We also need to install Critters
Next.JS will internally use this library called Critters
Now, all you do is
yarn build and then
Make a Postman call and under "Preview" you could see that the Tailwind styles are now getting applied at the server!
Here are the before and after screenshots:
You can see that no styles are applied on the server rendered page.
After the changes are made, you can see that the styles are applied on the server rendered page.
If you are using the
@tailwindcss/typography plugin, you'd notice these warnings in your logs.
More info here