Setup Next.js with Tailwind in a Nx Workspace
Besides having a performant website, our portfolio site should also have a decent design and UI. Now, either you're a champion in CSS and UI design in general, or you just rely on some existing CSS framework that takes care of 90% of the things for you already. In our case, we use Tailwind.
In this lesson, we specifically look into the setup of Tailwind and how we can integrate it into our Nx workspace together with Next.js
Prefer to read along as well? Here's the accompanying article.
I had issues with the tailwind setup. https://github.com/nrwl/nx/issues/8355#issuecomment-1038869370 provided a good solution, just the content portion is needed.
yeah if I recall correctly, I had used Tailwind 2 at that time which had a purge property which got renamed to content etc. This guide should be correct and up to date: https://nx.dev/guides/using-tailwind-css-in-react. Also here's an example how we use it for the nx.dev website: https://github.com/nrwl/nx/blob/master/nx-dev/nx-dev/tailwind.config.js. Hope that helps :)
The latest tailwind would have your config looking for like this (for anyone viewing this more recently)
module.exports = { content: ['./apps/site//*.html', './apps/site//*.tsx'], theme: { extend: {}, }, plugins: [], };
This worked: https://nx.dev/guides/using-tailwind-css-in-react