Building a blog with Next.js and Nx Series
This article is part of a series around building a blog with Nx, Next.js, Tailwind, Storybook and Cypress.
- Create a Next.js web app with Nx
- Setup Next.js to use Tailwind with Nx
- Read and render Markdown files with Next.js and Nx
- Component hydration with MDX in Next.js and Nx
- Hot Reload MDX changes in Next.js with Nx
- Using Nx Workspace generators to scaffold new blog posts
- Use Storybook with Next.js, Tailwind and Nx to develop components in isolation (soon)
- Use Cypress with Next.js and Nx to battle test your React Components (soon)
- Publishing a Next.js site to Vercel with Nx (soon)
Follow us on Twitter or subscribe to the newsletter to get notified when new articles get published.
Table of Contents
- Install and configure Tailwind in an Nx workspace
- Include the TailwindCSS styles
- Testing the integration
- How do we handle Tailwind config files in a monorepo
- Tailwind CSS Purging
- Configure CSS Purging
- Enabling Tailwind JIT
- Conclusion
It’s important to note that you don’t need to use a preprocessor with Tailwind — you typically write very little CSS on a Tailwind project anyways so using a preprocessor just isn’t as beneficial as it would be in a project where you write a lot of custom CSS.
The official TailwindCSS docs page already has a guide on how to setup Tailwind with Next.js. Definitely check that out.
Install and configure Tailwind in an Nx workspace
The first step is to install the necessary npm packages.
yarn add tailwindcss@latest postcss@latest autoprefixer@latest
The next step is to create the tailwind.config.js as well as postcss.config.js files. Tailwind already comes with a utility for that. Note, previously we generated our app (named site) into the apps folder of Nx. Therefore, when generating the Tailwind configuration, we need to cd into that folder.
