No `Hot Reload` when importing TailwindConfig from another `tailwind.config.ts` file

[0xbuidler]

What version of Tailwind CSS are you using?

3.3

What build tool (or framework if it abstracts the build tool) are you using?

Next: 14.1.0 Postcss: 8

What version of Node.js are you using?

20.11.0

What browser are you using?

Chrome

What operating system are you using?

MacOS

Reproduction URL

Codesandbox

Describe your issue

I'm using a monorepo and have my tailwind.config.ts in a ui package that I import from my Nextjs apps like so export * from "@repo/ui/tailwind.config"; in my apps tailwind.config.ts.

Basically, what I expect is that when I change something in that file it hot reload like it does in a normal setup. But it doesn't hot reload and I have to shutdown dev and reload it manually.

Thanks for your help 🙏

[KOCNS1]

I believe that simply importing your desired config from another folder within your monorepo is not the correct approach and is not possible. However, you can import your main Tailwind CSS config into your app if you include a tailwind.config.ts in your app's root and use the presets option to import the main config.

Example:

// This is the config file that should be at the root of your app

/** @type {import('tailwindcss').Config} */
module.exports = {
  presets: [
    // Assuming you have a path alias for your UI library; otherwise, put the relative path here
    require('@ui/shared/tailwind.config')
  ],
  // ...
}

by doing so, and assuming that the content option is filled correctly, Hot Reload should work as expected

Here's the documentation if you want more information about it 😄

[amanda2369weaver]

Thank you for this information. Official Site