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.
Instructor: [0:00] so to make sure that our portfolio website looks nice and stunning, we want to use Tailwind.
[0:05] Tailwind is a utility-first CSS framework which has a novel approach on styling, in general. Rather than having large CSS files, you annotate the HTML elements with very specific Tailwind classes. Those classes are already set up to make sure you follow best practices in the design of your UI.
[0:25] To get started, we definitely want to install Tailwind first. The documentation has a couple of installation guides, where you can follow along, the things you have to install. We definitely want to install these three libraries, so Tailwind itself, PostCSS, and Autoprefixer.
[0:42] As such, the thing we do at first is just add them to our workspace. This installs the necessary packages for us. Next, we want to add Tailwind support to our Next.js application. Tailwind has a command that sets it up for us. Usually, you would add, npx tailwindcss init -p. That would already take care of generating the initial Tailwind setup and the Tailwind config.
[1:10] We don't want to do that at the root of our workspace, but we want to do that for the specific applications we want to use Tailwind for. We are in a monorepo scenario, where we might, potentially, have multiple applications. We want to add it to our site project here. We just CD into that directory, and then execute, npx tailwindcss init -p. That creates the Tailwind and PostCSS config for us.
[1:37] Let's first open up the PostCSS config and define where we load our config file. In the Tailwind CSS property there, we can specify the config property. We want to dynamically load where that config lies, and so we use the joinFromThePath. We can actually just require this here. We use the path library, and then we join it with the current directory name, tailwind.config.js.
[2:07] That will make sure, even if we move that project around, it would always find the corresponding Tailwind CSS file here. We can leave the Tailwind CSS as is for now.
[2:16] Now, in order to import these styles, we have different possibilities. Either we go into that app.tsx file and we direct the import tailwind in there, so we could do something like, tailwindcss tailwind.css, or we reuse our current styles document here, which we already have set up by NX, and import all the styles in there.
[2:42] Let me first delete everything that is in here, and include the Tailwind-specific classes. We would want to have the base here, we would want to have the components, and we would want to have utilities. These are Tailwind-specific imports, which you can look up on their documentation, to get more info of what each of these is about.
[3:04] With that, this Styles document, this style.css file, basically, gets already imported into our App.tsx file, which is the global one where our application's being bootstrapped. We could go and test this now.
[3:16] Let's also remove here a couple of things which we don't need anymore. We don't need that header, which has been pre-generated for us. We rather want to keep the main and extra components in here.
[3:26] Next, let's test the Tailwind integration, see whether it works. Let's go to the index.tsx file, and let me remove all the part that is in here. This is pre-generated code, which we don't need right now. Rather than that, let me paste in some Tailwind setup, which already uses some Tailwind classes, which will allow us to verify whether Tailwind is properly set up and working.
[3:49] Now that we have done that, let's start the application again. Then, if we go to localhost:4200 and load it up, we should see the site start with Tailwind. You can clearly see here that the font is different, we have some start buttons, we have some hover effects. This is Tailwind in action.