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
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
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
Or using yarn
yarn 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:
npx 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:
Module.exports = {
Purge: [‘./pages/**/*.{js,ts,jxs,tax}’]
darkMode : false,
theme : {
extend : { },
},
Variants : {
extend: { },
},
plugins: []
}
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
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
Tailwind grid-How to use tailwind CSS grid templates in your project
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind form-How to create and style a Responsive Form using Tailwind CSS
How to use tailwind CSS padding, margin and border in your project
How to create a beautiful React Bootstrap select with icons.
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind Modal-How to create a React Modal using Tailwind CSS.
How to Implement a React Step Progress Bar Using Tailwind CSS
Top comments (0)