How to use Tailwind CSS with TurboPack Next.js 13

Vercel the creator of Next.js recently launched a new version of Next.js v13 during Next.js Conf 2022.

Next.js 13 includes the best features that every developer requires for development. Some of the best features include a new bundler called Turbopack, an App directory, and some great performance optimization. Read all new the imporvements and features on their official blog.

In this tutorial we’ll show you how to integrate Tailwind with TurboPack Next.JS 13.

Create a project

Let’s begin by creating Next.js project if you don’t already have one, then follow the steps:

npx create-next-app@latest my-project
cd my-project

Install Tailwind CSS

In order to integrate Tailwind CSS with TurboPack, we need to add the following dependencies to our project:

• tailwindcss
• autoprefixer
• concurrently

npm install -D tailwindcss autoprefixer concurrently
npx tailwindcss init

Configuring template paths

Once initialising Tailwind in your project. Open tailwind.config.js and add all the necessary paths to the file.

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

Updating package.json

Update the following scripts inside package.json file to build production and development CSS.

"dev": "concurrently \"next dev --turbo\" \"tailwindcss -i styles/globals.css -o styles/dist.css -w\"",
"build": "tailwindcss -m -i styles/globals.css -o styles/dist.css && next build",

Add Tailwind to CSS

Inside ./styles/globals.cssfile add @tailwind directives for each Tailwind layers.

/* globals.css */

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

Import CSS File

Import the compiled CSS file to ./pages/_app.tsx:

import '../styles/dist.css'

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

export default MyApp

Conclusion

Now, you have successfully integrated Tailwind CSS with TurboPack (Next.js 13)

I hope you have learned something new and helpful

Thanks for reading

Follow me on Twitter

Thanks for reading!