🥳
WindFrame is here: Design, prototype and code
sale icon End of Summer Sale 🎁 Get Contrast PRO UI library + admin template with 5 admin dahsboards, 23 pages and 10000+ components at 60% off 🎉
postImage

How to use Tailwind CSS in Nextjs

blogImage

By Emmanuel Chinonso

We Developer

Tailwind CSS is a CSS framework that can be included in any of your projects.

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
  • 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:

1npx create-next-app Building-tailwind-app

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:

1
2cd Building-tailwind-app

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:

1npm install –D tailwindcss@latest postcss@latest autoprefixer@latest

Or using yarn

1
2yarn add –D tailwindcss@latest postcss@latest autoprefixer@latest.

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:

1npx tailwind init –p

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:

1Module.exports = {
2Purge: [‘./pages/**/*.{js,ts,jxs,tax}’]
3darkMode : false,
4theme : {
5 extend : { },
6},
7Variants : {
8 extend: { },
9},
10plugins: [ ]
11}

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.

Including Tailwind in your Application

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:

1
2Import "tailwindcss/tailwind.css"
3
4Function myApp({ Component, pageProps }) {
5Return <Component {…pageProps } />
6}
7
8Export default MyApp

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 TailwindCss in Next.js application.

Conclusion

In today’s Tailwind CSS tutorial, we explained how to include 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.

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...