Using Tailwind CSS and SASS to Set Up Your Next.js Project
Published: 2023-05-26 15:58:33

---
title: Using Tailwind CSS and SASS to Set Up Your Next.js Project
published: true
date: 2022-05-01 19:52:48 UTC
tags: 
canonical_url: 
---

Building a website with Next.js which required the installation of different dependencies can be frustrating. In this article, we will discuss how you can set up your app using Tailwind CSS and SASS.

## **Intro**

Next.js is an open-source web development framework built on top of Node.js that enables server-side rendering and the generation of static webpages in React-based online apps.  
Tailwind CSS is a highly configurable, low-level CSS framework that provides you with all of the building blocks you need to create personalized designs without having to struggle to override irritating opinionated styles.  
SASS is a Cascading Style Sheets preprocessor programming language that may be interpreted or compiled. The scripting language itself is called SassScript. CSS is entertaining on its own, but stylesheets are becoming larger, more complicated, and more difficult to manage. A preprocessor can aid in this situation. Sass allows you to leverage capabilities that aren't currently available in CSS, such as variables, nesting, mixins, inheritance, and other useful features that make creating CSS more enjoyable. Nesting is one of the features I love using with sass as it gets rid of unnecessary mentioning of classes.

## **Installing Next.js**

Installing next.js can be done with the following code below:

```
npx-create-next-app

```

The code above will install the required dependencies and a well-structured next.js app will be set up. To start the project run the code below:

```
npm run dev

```

You will see your application running on `localhost:3000`

## **Installing Sass**

Next.js has built-In Sass Support. But before you can start using sass you need to install sass using the following code below:

```
npm install sass

```

## **Installing Tailwind css and postcss**

Now let install tailwindcss into our next.js app with the following code below:

```
npm install -D tailwindcss postcss autoprefixer

```

After the installation is complete, run the following code below for the automatic creation of `tailwind.config.js` and `postcss.config.js`

```
npx tailwindcss init

```

Our `tailwind.config.js` file needs to look like the code below indicating the respective file types you will be using in your project.

```
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

```

## **Stylesheet Creation** 

In this step, we will be creating a style folder inside our next.js app and create a file named `index.scss` and then paste the following code into the file.

```
@tailwind base;
@tailwind components;
@tailwind utilities;

```

After the above step the next step is to import your `index.scss` file and `tailwindcss/tailwindcss` to your `_app.js` file in the pages folder of your next.js app .

```
import '../styles/index.scss'
import 'tailwindcss/tailwind.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

```

Congratulations your Next.js app is ready for building .

### **Conclusion**

In this article, I have been able to cover various steps on how you will be able to build a project with Next.js, Tailwind-CSS, and SASS Looking for a fully functional source code check my Github [repo](https://github.com/Te-Stack/Manage-Landing-Page)