Using Tailwind CSS in React and Next.js
This guide serves as a quickstart to installing Tailwind CSS in your React and Next.js app.
For more in-depth look on this topic, be sure to check out our blog post on Setting up Next.js to use Tailwind with Nx.
Automated Setup
The easiest way to set up Tailwind is using the @nrwl/react:setup-tailwind
generator.
nx g @nrwl/react:setup-tailwind --project=<your app here>
This generator will install the necessary dependencies and add postcss.config.js
and tailwind.config.js
files.
You will now be able to use Tailwind class names and utilities in your app. For example,
function Hello() {
return <div className="bg-indigo-500 p-2 font-mono">Hello!</div>;
}
If you are having issues with the generator, or want to perform the steps manually, then follow the instructions in the next section.
Manual Setup Instructions
These manual steps are not required if you use the generator from the previous section.
Step 1: Install Tailwind Dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
or with yarn
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
This installs the requisite tailwind dependencies.
Step 2: Initialize Tailwind
The simplest way to initialize Tailwind is to use their CLI.
cd apps/{your app here}
npx tailwindcss init -p
This creates the required files with a general boilerplate implementation.
Pointing PostCSS to Tailwind Config
Next, adjust the postcss.config.js
as follows:
const { join } = require('path');
module.exports = {
plugins: {
tailwindcss: {
config: join(__dirname, 'tailwind.config.js'),
},
autoprefixer: {},
},
};
Introducing Nx Utility for Better Tailwind Purging
One of the advantages of Tailwind is that it post-processes your CSS removing (also called "purging") all the parts that are not being used. In order to configure which file should be processed, the tailwind.config.js
has a content
property (formerly called purge
in v2). You can find more details on Tailwind's official documentation.
The content
property usually consists of a glob pattern to include all the necessary files that should be processed. In a Nx workspace it is very common for a project to have other projects as its dependencies. Setting and updating the glob to reflect those dependencies and their files is cumbersome and error-prone.
Nx has a utility function that can be used to construct the glob representation of all files a project depends on (based on the Nx Project Graph).
The function receives a directory path that is used to identify the project for which the dependencies are going to be identified (therefore it needs to be a directory path within a project). It can also receive an optional glob pattern to append to each dependency source root path to conform the final glob pattern. If the glob pattern is not provided, it will default to /**/!(*.stories|*.spec).{ts,html}
.
const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
const { join } = require('path');
module.exports = {
content: [
join(
__dirname,
'{src,pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}'
),
...createGlobPatternsForDependencies(__dirname),
],
theme: {
extend: {},
},
plugins: [],
};
In the above, you are invoking the createGlobPatternsForDependencies
utility function with the __dirname
of the project root. The utility function will identify the project app1
and obtain its dependencies from the project graph. It will then create the glob patterns for each dependency and return them as an array. If app1
were to have lib1
and lib2
as dependencies, the utility function will return the following glob patterns:
[
'libs/lib1/src/**/!(*.stories|*.spec).{ts,tsx,html}',
'libs/lib2/src/**/!(*.stories|*.spec).{ts,tsx,html}',
];
Step 3: Import Tailwind CSS Styles
Next, import tailwind styles to the application's base styles.css
or styles.scss
file. This can be done by adding the following lines:
@tailwind components;
@tailwind base;
@tailwind utilities;
Step 4: Applying configuration to libraries
Lastly, let's update the application's project configuration to point to the postcss.config.js
file that we created in step 2.
Open up the apps/{your app here}/project.json
file and add the following to the build target.
{
// ...
"targets": {
"build": {
"executor": "@nrwl/web:webpack",
"options": {
// ...
"postcssConfig": "apps/{your app here}/postcss.config.js"
}
}
}
// ...
}
By specifying the postcssConfig
option, the PostCSS and Tailwind configuration will be applied to all libraries used by the application as well.
If your libraries have their own postcss.config.js
and tailwind.config.js
files then you should not use the postcssConfig
option. Doing so will ignore the library-specific configuration and apply the application's configuration to everything.