Tailwind CSS is a CSS framework used together with another technology such as Nextjs to build any number of projects. You can add Tailwind CSS to your Nextjs application, React projects, or technology for building beautiful UI.
Tailwind CSS is not like other CSS frameworks like Bootstrap, Material UI, etc. In a sense, the technology is based on utility-first classes. This is because 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 article, we will explore how to install and set up Tailwind CSS in a Next.js project, enabling you to leverage the power of both technologies.
Table of content
Setting up the Nextjs application
Install Tailwind CSS in the Nextjs application
Setting up the configuration files
Purging of Tailwind CSS
How to import a Tailwind CSS in the Nextjs application
Conclusion
Setting up the Nextjs application
The Nextjs Tailwind application must be set up first before we can go ahead to build our application on it using Tailwind. If you already do, you can skip this step. If not, you should follow this step to set it up.
It is also worth noting that to continue this tailwind CSS tutorial. You need to run Nextjs version 10 or later on your machine.
Run the following command on your favorite terminal for you to set up your Nextjs Tailwind application.
npx create-next-app Building-tailwind-app
You can call your application any name you want. In the command, we named our Nextjs tailwind application “Building-tailwind-app”.
If we are to continue, we need to go to the root of our Nextjs tailwind application. We can do this by running the following command on our terminal.
cd Building-tailwind-app
Install Tailwind CSS in the Nextjs application
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 install these packages by running the following npm command on the terminal.
npm install –D tailwindcss@latest postcss@latest autoprefixer@latest
Or using yarn
yarn add –D tailwindcss@latest postcss@latest autoprefixer@latest.
Setting up the configuration files
The next thing we need to do is to set up the config files, one for tailwind CSS and the other one for Postcss.
A PostCSS is a tool for transforming CSS with JavaScript. To create these files at the root of our next.js tailwind application, all we have to do is to run the following command on our terminal.
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.
To purge the Tailwind styles. You should update the tailwind.config.js you created with the following codes.
Module.exports = {Purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}']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.
However, the configuration above is for those still using the Tailwind CSS v2. For those using the Tailwind CSS v3, your configuration will be like the code below.
Module.exports = { content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], darkMode: false, theme: { extend: {}, }, Variants: { extend: {}, }, plugins: [],};
This will also cover both JS and TypeScript files. it is always wise to apply the PurgeCSS 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 tailwind project.
How do I import a Tailwind CSS in the Nextjs application
Now what is left is to include Tailwind CSS in the Next.js application. To do this, you simply update /pages/-app.js with the following codes.
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 the Next.js application.
Conclusion
In this article, we covered the process of installing and setting up Tailwind CSS in a Next.js project. We discussed the benefits of using Tailwind CSS and explored the steps involved in the setup, including configuring Tailwind CSS, customizing styles, and applying Tailwind CSS classes to Next.js components. We also touched on optimizing Tailwind CSS for production by purging unused CSS and extracting critical CSS.
By leveraging the power of Tailwind CSS and Next.js, you can build modern and responsive user interfaces efficiently. Tailwind CSS's utility-first approach, combined with Next.js's server-side rendering capabilities, provides a solid foundation for developing high-quality web applications.