1. 6
    Setup Next.js with Tailwind in a Nx Workspace
    4m 10s

Setup Next.js with Tailwind in a Nx Workspace

Share this video with your friends

Send Tweet

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.

Kayla Altepeter
~ 2 years ago

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.

Juri Strumpflohnerinstructor
~ 2 years ago

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 :)

Samuel McMurtrie
~ 2 years ago

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: [], };

michaelbruns1
~ 2 years ago

This worked: https://nx.dev/guides/using-tailwind-css-in-react