How To Organise Your Tailwind CSS Classes in Next js

When building projects with Nextjs and Tailwind CSS your components can look rough and untidy 🥲. This is because Tailwind CSS is a utility-first framework whose superpowers include utility classes for almost anything you want to achieve with CSS.

In this article, I'll quickly show you how to set up a simple folder structure to neatly organize your Tailwind CSS classes when working with Nextjs or React 👨‍💻.

I'm Martins Ngene, A Software Engineer 🙂 and my goal is to share as much knowledge as I can to assist you in your daily workflow and learning 🚀.

Setting Up A Tailwind CSS + Nextjs Project

Setting up a Tailwind CSS + Nextjs project has never been easier until Nextjs 13. Follow the installation guide here to get started.

A Component Case Study

Using a NavBar component as a case study below is what it looks like to build a component with Tailwind CSS:

Organising The Tailwind CSS Classes

To organize the classes in the above component, we have to create a file with the extension .module.css. You can name the file whatever you want to but the name should end with a .module.css. This file can be stored in another folder in your project but I'd recommend you store it in the same folder as your component. Below is a picture of the folder structure:

In the above image, you can see that my component is created in a folder called 'navbar' in the index.tsx file and you can see my CSS module file named styles.module.css. In the styles.module.css I'll copy and paste my utility classes as a group and give them a name according to the sections of the component I made before. so my CSS module will look like the picture below:

Notice that the convention is similar to writing regular CSS styles but there are a couple of things to note. First, after declaring your class name, you have to use the @apply before adding your tailwind CSS classes. Also, be sure to end the class names with a semicolon. After adding a semicolon at the end of the classes, you can add regular CSS if you want to and it will work just fine. You can also configure Prettier to automatically add the semicolons for you when you save the file. Checkout the code below to see how to add regular CSS to your tailwind CSS classes:

.container {
  @apply mx-auto lg:mx-0 w-[80%] lg:w-full h-[100vh];
  display: flex;
  align-items: center;
  justify-content: center;
}

Now that we have separated our tailwind classes, we can import our module to our component:

Import the keyword styles from your CSS module (styles.module.css), then add the class names to the respective sections on your component by using the dot notation on the styles object you imported from the CSS module. For example, if you have a class named container in your CSS module, go to the className attribute on the element you want to add it and reference it from the styles object:

<div className={styles.container}> Hello World </div>

If you followed through, you should see your styles apply to your webpage. But if you have any issues or suggestions, drop them in the comment section below, and let's discuss 😎

I hope this article helped you in one way or another. Follow me for more articles on web development and software engineering. I’m also available to connect on LinkedIn.