DEV Community

Swastik Biswas
Swastik Biswas

Posted on

Setting Up Tailwind with Next.js

Introduction

Tailwind CSS is a utility-first CSS framework that provides a set
of CSS classes to style your HTML elements. It's designed to be highly customizable and requires minimal setup, making it a popular choice for developers who want to build web applications quickly.

One of the main benefits of Tailwind CSS is that it allows you to build your own design system using its pre-defined CSS classes. You can customize the styles by modifying the configuration file and adding your own styles to the framework.

Tailwind CSS also provides a set of responsive utility classes that allow you to adjust the styles of your elements based on the screen size. This makes it easy to build responsive layouts without having to write media queries.

In addition, Tailwind CSS supports modern browsers and has a small file size, making it a lightweight and efficient CSS framework.

Overall, Tailwind CSS is a powerful tool for building modern web applications, and it's easy to learn and use, making it a great choice for developers of all skill levels.

It's easy to set up and can be integrated into a Next.js project with just a few steps. Here's how you can set up Tailwind CSS with Next.js:

Instructions

First, make sure you have the Next.js framework installed on your machine. If you don't have it, you can install it by running the following command:

npm install next
Enter fullscreen mode Exit fullscreen mode

Next, create a new Next.js project using the following command:

npx create-next-app my-project
Enter fullscreen mode Exit fullscreen mode

Navigate to the project directory and install the required dependencies:

cd my-project
npm install tailwindcss postcss-preset-env
Enter fullscreen mode Exit fullscreen mode

Create a tailwind.config.js file in the root of your project directory and add the following configuration:

module.exports = {
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Create a postcss.config.js file in the root of your project directory and add the following configuration:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-preset-env')({
      stage: 0,
    }),
  ],
}
Enter fullscreen mode Exit fullscreen mode

In your package.json file, add the following script:

"scripts": {
  "build:css": "tailwindcss build src/styles.css -o src/output.css"
}
Enter fullscreen mode Exit fullscreen mode

Create a src/styles.css file and add the following:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Enter fullscreen mode Exit fullscreen mode

Run the following command to build the CSS file:

npm run build:css
Enter fullscreen mode Exit fullscreen mode

Finally, add the built CSS file to your Next.js project by including it in the <head> element of your pages/_app.js file:

import '../src/output.css'
Enter fullscreen mode Exit fullscreen mode

That's it! You should now be able to use Tailwind CSS in your Next.js project.

Note: The commands and instructions given here are for macOS and Linux. If you're using Windows, you may need to use slightly different commands. For example, instead of npx create-next-app, you can use yarn create next-app. Similarly, instead of npm install, you can use yarn add.

Conclusion

In conclusion, setting up Tailwind CSS with Next.js is a straightforward process that can be accomplished with just a few simple steps. By installing the required dependencies, creating a configuration file, and building the CSS file, you can easily integrate Tailwind CSS into your Next.js project and start using its powerful utility-first CSS classes to quickly style your web application.

With its pre-defined styles and responsive utility classes, Tailwind CSS is a great choice for building modern web applications, and it's easy to customize and extend to fit your specific needs. Whether you're a beginner or an experienced developer, Tailwind CSS is a valuable tool that can help you build high-quality web applications more efficiently.

Top comments (1)

Collapse
 
amykhar profile image
amykhar

To be honest, I think this article could have skipped how to install Next JS (people looking for info on using Tailwind in NextJS most likely already have it installed). It would also be helpful

Also, you skipped over the postcss config, which is probably the part that trips most people up because they don't know that they can change the paths to the files that Tailwind can be used in.