@tailwindcss/postcss ignores changes from CSS files (NextJS 14)

[jpomykala]

I followed the installation from here: https://tailwindcss.com/docs/installation/framework-guides/nextjs and Tailwind works just fine, however I make changes to landing.scss, they are ignored until I restart the server or modify the postcss.config.js configuration. Is there an option to tell @tailwindcss/postcss to watch the CSS/SCSS files in the styles directory? I couldn't find any config options for it.

Dependencies:

"@tailwindcss/postcss": "^4.0.14",
"tailwindcss": "^4.0.14",
"sass": "^1.38.2",
"next": "^14.2.24",

Project tree:

.
├── package.json
├── pages
│   └── _app.tsx
├── postcss.config.js
└── styles
    ├── index.scss
    └── landing.scss

postcss.config.js

module.exports = {
  plugins: {
    "@tailwindcss/postcss": {},
  }
};

_app.tsx

import "../styles/index.scss";

index.scss

@import "tailwindcss" prefix(tw);
@import "landing";

landing.scss

.landing {
      h1 {
        color: #ff0000;
      }
}

[wongjn]

I don't have a direct answer to your question, but it is advised not to use Sass in conjunction with Tailwind. You shouldn't need to use Sass since the optimal paradigm of Tailwind usage is to write Tailwind class names directly in the template markup and not have to write much CSS at all.

[jpomykala]

Thanks! I think I configured it properly now!

[jpomykala]

Okay, so before writing the post I spent ~2 hours on this, and right after @wongjn (thanks!) response I think I figured it out.

To make it work I've left my setup as is, but:

1. I've removed 'sass' dependency at all, no idea if was needed at all if everything works without it 🤔
2. Created v3 config tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'tw-',
  important: true,
  corePlugins: {
    preflight: true,
  },
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Created tailwind.css

@import "tailwindcss";
@config "../tailwind.config.js";

4. Imported tailwind.css in _app.tsx like this:

import "../styles/index.scss";
import "../styles/tailwind.css";

where index.scss contains all my custom styles in SCSS and Bootstrap 5 (yes, I'm still using it)

Let's be honest, it's a Frankenstein configuration with custom SCSS, Bootstrap 5, and Tailwind 4, but it works. I'm just looking to see if Tailwind can make my work more pleasant, as I'm currently writing a lot of utility classes on top of Bootstrap 5. I'm only using a small subset of Bootstrap right now, and I'm considering making the switch, but it can't happen overnight—it has to be a gradual transition.