Use Tailwind css in a nrwl/nx Next js project - next.js

Question

How to make Tailwind css work in a nrwl/nx Next js project?
Now I am using the common approach but it failed:
[ error ] ./styles/main.css
Error: Didn't get a result from child compiler
the common approach I took:
npx create-nx-workspace#latest my-org
yarn add --dev #nrwl/next
nx g #nrwl/next:application my-project
yarn add tailwindcss autoprefixer postcss-loader #zeit/next-css
cd apps/my-project
create
postcss.config.js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer')
]
};
create
next.config.js
const withCSS = require('#zeit/next-css');
module.exports = withCSS({});
create
styles/main.css
#tailwind base;
#tailwind components;
#tailwind utilities;
create a default _app.js in pages
add import '../styles/main.css' in _app.js

Answer 1

I have solved the problem.
Here is how I added tailwind in next.js project
install tailwind and autoprefixer in the workspace
create tailwind.config.js and tailwind.css.
import tailwind.css at _app.tsx
create next.config.js
const path = require('path');
module.exports = {
webpack: config => {
config.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('tailwindcss')(
path.resolve(__dirname, 'tailwind.config.js') // the absolute path of your tailwind.config.js
),
require('autoprefixer')
]
}
}
],
// the absolute path of the folder contains tailwind.css
// I reuse tailwind.css across projects and libs so I put it in the workspace root
// Maybe I should create a lib for it.
include: path.resolve('./global')
});
return config;
}
};
It is similar if you wanna integrate Tailwind with lib's storybook or in projects of other framework. Just find the way to push rules to webpack config.
Hope it helps.

Answer 2

If you use new version - 9.2 then you need this article:
https://nextjs.org/blog/next-9-2
And updated setup example for Next.js 9.2:
https://github.com/tailwindcss/setup-examples/pull/50
I tried it, it good works for me.