Photo by Markus Spiske
Getting started with Tailwind CSS in Next.js
Posted on 27th June 2020•
Last updated on 12th April 2021
4 min read•
Tailwind CSS is an awesome CSS framework. It gives us enough styling options without being too opinionated. Lately I’ve being using it along with Next.js. In this post I’ll show how to setup a Next.js project with Tailwind CSS.
Setting up the Next.js project
Start with initializing a project.
Then install the React and Next.js dependencies.
Next add the following scripts in
After that let’s create a layout component to wrap all our components in all the pages. Create the
src folder. In it create another folder called
components and in it create
Next let’s create the index page in out application. In the project root create the
pages folder and in it create
To start the development server just run the
When you http://localhost:3000/ in your browser you see the following.
Adding Tailwind CSS
First install Tailwind CSS as a dev dependency.
Next we need to create the Tailwind the config file. We can create a minimal config file with the following command.
Since Tailwind CSS has thousands of CSS classes the CSS file will end up very big.
Since we will will rarely use the all classes, we should specify which classes to include the final CSS file. Fortunately Tailwind CSS has a built in PurgeCSS tool which can be used to remove all unused classes.
tailwind.config.js add all the React component files in the
purge property. In our case we will add all files in the
Since Tailwind CSS generates a lot of classes by default, running the application in development mode can be quite slow especially when trying to use DevTools.
To help with this we can use the Just-in-Time Mode. To enable it we just need to add it to the
Finally we need to import Tailwind CSS to our application. In Next.js we have to do it in the
_app.js file in the
pages folder and directly import the CSS file.
That’s all you need to do to start using Tailwind CSS in your Next.js project. You can style your components by adding the classes in the
For example, we can style the title in the index page like this.
We can center all the content by adding some classes to the
If you enjoyed this post please leave a like or two below!!!