Using Multiple Tailwind Configurations in the Next.js App Directory

Do you use Tailwind? I do.
When using Tailwind, you might want to use different configurations for different pages.
In this article, I will introduce how to use different Tailwind configs for each layout using the Next.js App Router.
I haven't used this in production yet, so please let me know in the comments if you have any feedback!

What we'll do

Use separate config files for the Top page and other pages within the same application.
Assuming applying a style different from the main application to the Top (LP) page.

Creating files for each route

Create a Top page and a Todos page.
Place layout and CSS files for each page as well.

└── app
  ├── layout.tsx
  ├── page.tsx
  ├── style.css
  └── todos
    ├── layout.tsx
    ├── page.tsx
    └── style.css

Defining Tailwind config files

Define a config file for the LP and another for the main application.

https://tailwindcss.com/docs/configuration#using-multiple-configurations

tailwind.lp.config.js

{
  ...,
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    colors: {
      primary: 'red'
    },
  },
}

tailwind.app.config.js

{
  ...,
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    colors: {
      primary: 'blue'
    },
  },
}

Importing the defined Tailwind config files into CSS files

/app/style.css

@config "../tailwind.lp.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

/app/todos/style.css

@config "../../tailwind.app.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

Importing CSS files in each layout

/app/layout.tsx

import './style.css'

/app/todos/layout.tsx

import './style.css'

As it stands, the Top layout from the parent directory would also be applied to the Todos page.
Furthermore, the layout created within the todos directory would not be applied to routes other than /todos/*.

Applying Route Groups

https://beta.nextjs.org/docs/routing/defining-routes#route-groups

└── app
  ├── (lp)
  │ ├── layout.tsx
  │ ├── page.tsx
  │ └── style.css
  └── (app)
    ├── layout.tsx
    ├── style.css
    └── todos
      └── page.tsx

Move the LP under the (lp) directory and the application under the (app) directory.
Update the file imports as well.
tailwind.lp.config.js will now apply to pages under /app/(lp), while tailwind.app.config.js will apply to pages under /app/(app).

Modifying the content in config files

Modify the content property in the config files to prevent generating unnecessary CSS during the build process.

tailwind.lp.config.js

{
  ...,
  content: ['./app/(lp)/**/*.{js,ts,jsx,tsx}'],
  ...
}

tailwind.app.config.js

{
  ...,
  content: ['./app/(app)/**/*.{js,ts,jsx,tsx}'],
  ...
}

Preview

Top	Todos
<p class="tw-text-primary">Top Page Text Primary</p>	<p class="tw-text-primary">Todos Page Text Primary</p>

Final thoughts

It feels like it might get a bit complicated when considering how to handle configurations for files outside the App directory.
Maybe it's better to just use CSS Modules for the LP.

If anyone knows how to handle multiple tailwind.config files without using the App directory, please let me know! 🙇‍♂️