How To Organise Your Tailwind CSS Classes in Next js
Tags: beginners, javascript, nextjs, tailwindcss
Published: 2023-08-09 10:02:21

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](https://nextjs.org/docs/getting-started/installation) 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:

![A NavBar Component Built With Tailwind CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uixg31svsa0ahk4k21cr.png)

## 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:


![Component File Structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmbgq9yfyn3ue5pc5xg9.png)

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:


![CSS Module File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iy689nia8bpnoixp20hm.png)

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:

![Organised Tailwind CSS Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/no5hx8v960koz6nkueoj.png)

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](https://www.linkedin.com/in/martins-ngene/).