DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

How to use Tailwind CSS in Next.js

#nextjs #tailwindcss #tutorial #frontend

Tailwind CSS is a CSS framework that can be included in any of your projects. You can include Tailwind css in Next.js projects or react projects or any work you might be working with.

Tailwind CSS is not like other CSS frameworks like bootstrap, material, etc., in the sense that it is based on utility-first.

This means it doesn’t focus on pre-designed components like buttons, cards, etc. It’s a low-level utility class that allows you to build a custom website from scratch without leaving your HTML file.

In this tailwind CSS tutorial, we will look at how to include Tailwind CSS in Next.js project.

Table of content

  • Setting the Next.js
  • Install Tailwind CSS
  • Setting up the config files
  • Purging of Tailwind
  • Including Tailwind in your Application/How do I import a Tailwind CSS in Next.js
  • Conclusion

Setting the Next.js

In adding tailwind CSS in next.js we need to set up the next.js application first. If you already set it up, you can skip this step. If not, you should follow this step to set it up.

It is also worth noting that in order to continue this tailwind CSS tutorial you need to be running next.js version 10 or later.

Run the following command on your favorite terminal for you to set up your next.js

Code:

npx create-next-app Building-tailwind-app
Enter fullscreen mode Exit fullscreen mode

You can call your application any name you want. In the command, we called our application “Building-tailwind-app”.

if we are to continue we need to go to the root of our application. We can do this by running the following command on our terminal.

Code:


cd Building-tailwind-app
Enter fullscreen mode Exit fullscreen mode

Install Tailwind CSS

To make use of the tailwind CSS framework you need three important packages. Tailwind, postcss, and autoprefixer.

We are going to install these three packages here. You can use npm by running this command on the terminal.

Code:


npm install –D tailwindcss@latest postcss@latest autoprefixer@latest
Enter fullscreen mode Exit fullscreen mode

Or using yarn


yarn add –D tailwindcss@latest postcss@latest autoprefixer@latest.
Enter fullscreen mode Exit fullscreen mode

Setting up the config files

The next thing we need to do is to set up the config files, one for tailwind while the other one for Postcss.

A PostCSS is a tool for transforming CSS with JavaScript. In order to create these files at the root of our application, all we have to do is to run the following command on our terminal.

Code:

npx tailwind init –p
Enter fullscreen mode Exit fullscreen mode

just like that, the tailwind.config.js and postcss.config.js will be added to the root of our application.

Purging of Tailwind

To purge tailwind CSS means to remove all the classes in your HTML that were not used. This allows for the faster loading of your applications.

In order to purge the Tailwind styles. You should update your tailwind.config.js you created with the following codes

Code:


Module.exports = {
Purge: [‘./pages/**/*.{js,ts,jxs,tax}’]
darkMode : false,
theme : {
           extend : { },
},
Variants : {
      extend: { },
},
plugins: []
}
Enter fullscreen mode Exit fullscreen mode

In the code above, we are instructing Tailwind to look at our page folder for styles we used.

This will also cover both JS and TypeScript files. it is always wise to apply the PugeCSS to only the tailwind CSS’s utility, not to the base styles or component classes. this is to ensure you don’t accidentally purge important base styles when working on your Next.js project.

Including Tailwind in your Application / How do i import a Tailwind CSS in Next.js

Now what is left is to include Tailwind CSS in Next.js application. In order to do this, you simply update /pages/-app.js with the following codes.

Code:


Import "tailwindcss/tailwind.css"

Function myApp({ Component, pageProps }) {
Return <Component {…pageProps } />
}

Export default MyApp
Enter fullscreen mode Exit fullscreen mode

Now, you would want to remove the styling in your /pages/index.js applications. What is left now is to build the Next.js application. As you can see it’s easy to include Tailwind CSS in Next.js application.

Conclusion

In today’s Tailwind CSS tutorial, we explained how to Import Tailwind CSS to our Next.js project or applications. We also went through step by step the process of including Tailwind CSS to Next.js projects. I hope you enjoyed the tutorial.

Resources

Top comments (0)

Read next

paharihacker profile image

A Complete Guide to React useEffect vs useLayoutEffect for Beginners

Rajesh Dhiman -

amaresh_adak profile image

Creating a Dynamic Product Showcase Carousel with React and Tailwind CSS

Amaresh Adak -

saidmounaim profile image

Next.js 15 Form Component: A Beginner's Guide

Said MOUNAIM -

krivanek06 profile image

Creating Custom rxResource API With Observables

Eduard Krivanek -