# Using Tailwind CSS in NEXTJS 13  with TurboPack

Hello Guys,

I hope you all have seen the NEXTJS conference and all the new things that are shipped with the release of NEXTJS 13, NEXTJS 13 had breaking changes and it changes how we used to work with NEXTJS before and  React in general

# Introduction to NEXTJS 13

Here are some cool features which are launched with NEXTJS 13 launch.

## 1. Turbo Pack 

> Introducing Turbopack: Rust-based successor to Webpack

Turbo Pack is a bundler-like web pack but it's powered by Rust and It is said to be 700x faster than Webpack and 10x faster than the famous bundler Vite. 

below is the comparison drawing for the turbo pack and other bundlers.

![Turbo pack comparison.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666948936704/5q_QsZv67.png align="left")

Though Turbo might feel amazing, webpack has a vast plugin ecosystem that turbopack lacks for now but Vercel Team is working hard to build those. This is also the reason we can't use preprocessor and Tailwind like we used to use in the Next 12 and earlier versions.

## 2. Nested Routes

Nested routes are the best and most awaited feature we developers were waiting for though it is already been used in several other frameworks like Remix and it's finally in NEXTJS 13 now.

You will be having a simple app directory that is still in beta where you can define the layout and nested routes easily.


![Nested Routes.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666949276993/pTVltlvBn.png align="left")


there are other features like dynamic OG image generation, Image, Layout, server components, and so on.., but with new technology, there is some trade-off as well, and one is we can't use Tailwind like we used to but there is a workaround to do that. 

In this article, we will be discussing that workout and will be implementing that too.


# Installing TailwindCSS With NEXTJS 13

Let's get started with the TailwindCSS and NEXTJS 13 with turbo pack

>Note: Tailwind works fine with the simple command npm run dev but with flag --turbo it won't work as the turbo pack doesn't support the tailwind yet.

Now that we know that let's start with the basic installation.


if you are liking this article till now let's connect on Twitter :).

%[https://twitter.com/theysaymaurya/status/1438924150588915716?s=20&t=kyRt69Oek_pc86i07IReRg]

## Installing NEXTJS 13 

Open your favorite terminal and let's get started with the installation of NEXTJS 13. The following command will also generate the app directory where you can perform nested routes and other new features. 

```
npx create-next-app@latest --experimental-app

```

Once that you can cd into the `my-app` which is now created.

## Installing tailwind CSS in NEXTJS 13

Now we will install Tailwind in NEXTJS 13.

```
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

```

run the above code inside your terminal which will create a new tailwind.config.js file for you.

## Setting Up Tailwind CSS in NEXTJS 13

Once the installation is done we need to set up the tailwind with PostCSS. Create a new file called `postcss.config.js` and paste the following content into that.

```javascript
// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

```

once that is done we will configure the `tailwind.config.js` as per NEXTJS 13 requirements. Here we will be adding an experimental app dir too.


```javascript
// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./pages/**/*.{js,ts,jsx,tsx}", "./app/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

```

## Add the Tailwind directives to your CSS

once that is done Add the Tailwind directives to your CSS, just open the `./app/global.css` and paste the below code on top.


```css
/* ./app/global.css */

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

```

## Setting up the input and output CSS files for the postCSS process. 

Now the trick is to concurrently compile our Tailwind CSS and add that to our file using the npm package called `concurrently`.


Go ahead and install concurrently by running the following command.

```
npm i concurrently

```

once that is done make a new file in the `app directory` and call it `output.css` after that open your `package.json` and make changes as follows 

```json
// package.json

"dev": "concurrently \"next dev\" \"tailwindcss --input ./app/globals.css --output ./app/output.css --watch\"",
"build": "tailwindcss ./app/globals.css --output ./app/output.css && next build",
```


## Add Compiled CSS to `layout.tsx`


```javascript

import Head from "next/head";
// import "./globals.css";
import "./output.css";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en'>
      <Head>
        <title>Create Next App</title>
        <meta name='description' content='Generated by create next app' />
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <body>{children}</body>
    </html>
  );
}

```

as you can see that I have commented on the `global.css` and imported `output.css`.


## Testing our Code 

Open the `page.tsx` inside the app directory and add some TailwindCSS utility classes to your codebase and run `npm run dev --turbo` to see those changes.

> Note: Make sure you are adding --turbo flag to use the turbo pack.

```
// page.tsx

import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
  return (
    <div className='w-full bg-black'>
      <main className='flex justify-center items-center m-auto h-screen flex-col'>
        <div className='text-8xl '>
          Welcome to <a href='https://nextjs.org'>Next.js 13!</a>
        </div>
        <div className='text-4xl my-10 '>
          This is a Tailwind Example with Next.js 13
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href='https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app'
          target='_blank'
          rel='noopener noreferrer'
        >
          Powered by{" "}
          <span className={styles.logo}>
            <Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
}




```

## Preview


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667028729639/2IFWn-Df3.png align="left")



# TL;DR

Use concurrently with `postCSS` so that each time it gets compiled the commands are as follows


```JSON
// package.json

"dev": "concurrently \"next dev\" \"tailwindcss --input ./app/globals.css --output ./app/output.css --watch\"",
"build": "tailwindcss ./app/globals.css --output ./app/output.css && next build",
```


If you liked this post and got to learn something new give it a like and let's connect on Twitter.
%[https://twitter.com/theysaymaurya/status/1438924150588915716?s=20&t=kyRt69Oek_pc86i07IReRg]