Recently, I was refactoring my blog using Next.js by a whim. There are 3 tech stacks I would use:
- Next.js (opens in a new tab) , a popular React framework with SSG, SSR support naturally
- Tailwindcss (opens in a new tab) , a low-level CSS framework with the utility-first concept.
- AMP (opens in a new tab) , an HTML framework developed by Google to make your website fast and loading smoothly.
However, There are so many restrictions in AMP for performance issues. At the beginning of the project, I found this issue (opens in a new tab), which means you can NOT add a global CSS as Next.js documented (opens in a new tab). So this article may be a guide for how to use tailwindcss with AMP in a Next.js project.
Step 1: How to add style in AMP
First, we are supposed to know how to add style for a page in AMP. After look up their official documents (opens in a new tab), there are only two ways to style your site:
React JSX syntax lets you add CSS inline intuitively, written as attributes and passed to elements. But it's pain to write pseudo-classes, add prefix and maintain. Besides, tailwindcss has already listed in our armoury, so I have to choose another method.
Define CSS within the <style amp-custom>
tag, then add the class name to where you wanna style. The only one thing is different from your usual CSS writing is to write it in the <head>
<style>
tag.
JJ Kasper (opens in a new tab) provided a way to implement this in Next.js: to overwrite _document (opens in a new tab).
So the next step is how to add tailwind CSS as a string into <style>
tag.
Step 2: How to add a CSS file as String into style tag
This step is too simple to just add a loader the Webpack config (opens in a new tab) in next.config.js
. raw-loader (opens in a new tab) allows importing files as a String, you could add it following Webpack customing doc (opens in a new tab):
Then download the tailwind.min.css
to your styles
folder at root directory, try to import it in pages/_document.js
That's it! But when you run next start
again after these steps, you would encounter a warning (if your pages are set to AMP):
Don't worry, we all know warning is not error. We can ignore this warning message during development until you wanna build a production version.
Step 3 How to build and deploy
Not only is it because of AMP validation error, but to add entire tailwindcss package into the final bundle is too big, so we need to process tailwindcss, leaving only the classes we actually use.
If your project was created by an official example (opens in a new tab), you would see the postcss.config.js
under root folder, and tailwindcss was imported in styles/index.css
Next.js compiles CSS using PostCSS, so you can just create a postcss.config.js
without other config then it works. And as you know, postcss.config.js
also is able to used by PostCSS CLI (opens in a new tab).
You need to add 2 steps before building process:
- Compile a
output.css
file tostyles
folder. - Import
styles/output.css
as String inpages/_document.js
.
So first, let's tweak postcss.config.js
for CLI using because of require()
function syntax.
Please notice a env variable called CSS_ENV
, it is going to use in future steps.
Second, importing styles/output.css
:
When you run command here:
you would see output.css
is generated. That's convenient if you add this line to your package.json
scripts.
Then you run yarn build
or npm run build
every time, it would compile CSS automatically.
After completing all the steps, you can now use tailwindcss well in both development and production environments.
Summary
OK finally, in a summary, you should NOT use tailwind in your Next.js project, because when you define a custom PostCSS configuration file, Next.js completely disables the built-in default behavior (opens in a new tab)......it's a joke.