Guide to Setup & Use Tailwind CSS with Next.js

Introduction

Tailwind CSS offers a unique approach, unlike the traditional CSS framework. Its fresh perspective and utility-first design are liked by the developers. With more than 50 thousand stars on GitHub and NPM 4.6 million downloads, it’s evident that the Tailwind CSS is a highly sought-after front-end development tool. When it is paired with Next.js, this duo creates a robust framework to build efficient and expandable solid server-side rendered web applications. This article walks you through various methods to set up a Next.js project with Tailwind CSS. 

Steps to Install Tailwind CSS

• Firstly, you need to install Node.js on your laptop. 
• Secondly, open the terminal and run the following command “npx create-next-app my-tailwind-project” to create a new project. 
• Once done, write the command “cd my-tailwind-project” and navigate to the project directory. 
• Next, you can install Tailwind CSS and dependencies by using the following command “npm install tailwindcss postcss autoprefixer” 
• Now, that you have done the first part, it is time to configure it to work with Next.js. This next section walks you through the steps.

Step to Configure Tailwind CSS

You need to first create a new file as postcss.config.js in the root directory of the project.  

Once done, add this code in the file “module.exports = { 

plugins: [ 'tailwindcss', 

    'postcss-flexbugs-fixes', 

    'postcss-preset-env', 

    [ 'postcss-normalize', 

      {allowDuplicates: false, 

      }, 

    ], 

    ['@fullhuman/postcss-purgecss', 

      { content: ['./pages/**/*.{js,jsx,ts,tsx}', './components/**/*.{js,jsx,ts,tsx}'], 

        defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [] } ], 'autoprefixer', 

  ],};”

This code will configure the setup of Tailwind CSS as well as add all the necessary PostCss plugins and PurgeCSS to discard the unused CSS from the production. The next section highlights the importance of generating a default Tailwind CSS configuration file to customize the Tailwind CSS. This configuration plays a crucial role in defining the color palette, spacing utilities, typography settings, and many more. 

Read more- What is Next.js? And What it is Used for?

What is the Importance of a Default Tailwind CSS Configuration?

Tailwind.config.js file provides an object that allows customization and extends the default configuration, making it one of the essential parts of Tailwind CSS. Moreover, it provides flexibility to extend utility classes, modify theme customization, and purge unused CSS.  

Customization, on the other hand, allows defining design systems and utility classes to align with your application requirements. You can write the following command “npx tailwindcss init” to generate the Tailwind CSS for default configuration. 

Steps to Customize Tailwind CSS

The following are the steps to customize Tailwind CSS according to your project’s needs.

First, you need to specify the purged file using the purge option using this code “module.exports = { purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],”, this ensures only the CSS classes used. 
Then, you need to disable the dark mode function by adding this code” darkMode: false, theme:”, thi will set the darkmode theme to false. 
After that, add the following code: “{extend: { 
colors: { 
primary: '#FF0000', 
secondary: '#00FF00', 
},” to extend the color palette with two custom colors i.e., primary and secondary. 
Once done, you need to customize the font family using this code “fontFamily: { 
sans: ['Roboto', 'Arial', 'sans-serif'], },}, },”, this will include the fonts Arial, Roboto, and the generic sans-serif fallback. 
Lastly, you can keep the variants and plugins section empty by adding this code “variants: {extend: {}, 
},plugins: [], 
};”.  

The above given steps for basic configuration. That’s the reason we have kept the variants and plugins section empty. If you want to customize it further, we highly recommend you to check the official documentation of Tailwind CSS. Furthermore, Tailwind CSS allows flexibility to tailor the framework according to your project’s needs. Once you are done with customizations, save the tailwind.config.js file, then proceed to the next section. 

Steps to Import Tailwind CSS Styles

• Open your “pages/_app.js file” and write the following code “import ‘tailwindcss/tailwind.css‘;” to import the file.
• Next, add this code ” function MyApp({ Component, pageProps }) { return <Component {…pageProps} />;} export default MyApp;”, it will import and compile the Tailwind CSS styles. Further, apply them to the entire application.
• Now, you are all set to begin your development server and see the tailwind CSS in full action.

Steps to Get Started with the Development Server

• Run the following command “npm run dev” on your laptop/computer first. 
  
• Then, type the given URL in your browser http://localhost:3000, you will find that the Tailwind CSS styling with Next.js is applied. 
  
• After that, it will generate the necessary CSS styles for a production-ready build of your application. 
  
• Now, you have successfully set up Tailwind CSS with Next.js. 

Why Use Tailwind CSS with Next.js?

Next.js promotes server-side rendered React applications, static site generation, and automatic code splitting, making it an exceptional option for development. When it is combined with Tailwind CSS, it enhances the overall development and streamlines the application. 

Usually, Tailwind CSS comes with many Styles to choose from but the best thing about Next.js is that it only keeps the necessary ones. This will largely help to make sites lighter and faster, and also make sure it does not carry extra weight. 

The combination of Tailwind and Next.js will  allow you to enjoy the added benefits such as simple development, more responsive UI, performance optimizations, and fast visually appealing design.  

Read Also- React.js vs. Next.js: Why businesses prefer Next.js over React.js?

Final Words

Congrats on making it to the end of the article, I am sure now you can build visually appealing and responsive UI components quickly in your Next.js projects.  But don’t forget to regularly update Tailwind CSS and its dependencies to benefit from the latest features as well as to fix bugs. If you are looking to hire seasoned Next.js developers for your next project, then sign up with Olibr now! 

Take control of your career and land your dream job!

Sign up and start applying to the best opportunities!

FAQs

No, there’s no similarities as these two have different purposes. Next UI is compatible only with the Next.js UI component library Framework. Whereas Tailwind being a utility-first CSS framework is compatible with any web development.

Its potential risk is overusing utility classes that could lead to more complex and hard-to-manage HTML files. Due to this, code will be less accessible and difficult to maintain in the long run. Moreover, there might be a chance that its file size can grow larger than the necessary CSS file. 

• First, you need to install using the following command “npm install -D tailwindcssnpx tailwindcss init”. 
• Then configure the path of template adding this code “module.exports = {content: [“./src/**/*.{html,js}”], 

theme: {extend: {}, 

}, plugins: [],}”. 

• After that, you need to add Tailwind directives to each layers of the main CSS, adding this code“@tailwind base;
  @tailwind components;
  @tailwind utilities;” 

• Now to start the Tailwind CLI build process by adding this code “npx tailwindcss -i ./src/input.css -o ./dist/output.css –watch” to run the CLI tool and scan template files for classes. 
• Once done, add the compiled CSS file inside the head tag using the following code and then style using Tailwind’s utility classes into your content  

“<html> 
<head> 
<meta charset=”UTF-8″> 
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 
<link href=”/dist/output.css” rel=”stylesheet”> 
</head>” 

Though Tailwind CSS has gained huge popularity, traditional CSS and other frameworks are still used in the industry. Rather than Tailwind CSS being the future of CSS, it is highly likely that there will be a combination of various approaches. 

For engineers

Find work worth your time.

Live engineering roles across India and the US, matched to your stack. Build a profile recruiters actually discover.

Browse jobsHow it works