Tailwind and gulp (spfx)

[Lureno-L]

What version of Tailwind CSS are you using?

4.1.13

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

gulp 4.0.2

What version of Node.js are you using?

v22.15.0

What browser are you using?

Edge

What operating system are you using?

Windows 10

Describe your question

I use spfx with React 17 version and rsuite for components (yeah, pretty old). So the problem was with applying adaptive width to rsuite component className="tw:lg:w-[400px] tw:xl:w-[500px]".
When screen is xl (1280 px and more)
style is actually correct:

.tw\:lg\:w-\[400px\], .tw\:xl\:w-\[500px\] {
    @media (width >= 80rem) {
        width: 500px;
    }
}

but when I shrink display to less than xl this css became:

.tw\:lg\:w-\[400px\], .tw\:xl\:w-\[500px\] {
}

while it should be 400px

Steps to reproduce:

There is some context how tailwind is applied to spfx:
this code should be put in middle of gulpfile.js:

const postcss = require("gulp-postcss");
const tailwind = require("@tailwindcss/postcss");

const tailwindcss = build.subTask(
"@tailwindcss/postcss",
function (gulp, buildOptions, done) {
    gulp
        .src("./src/tailwind.css")
        .pipe(
            postcss([
            tailwind("./tailwind.config.js"),
            ])
        )
        .pipe(gulp.dest("dist"));
    done();
}
);
build.rig.addPreBuildTask(tailwindcss);

(I added prefix for more separation tailwind classes)
tailwind.css:

@import 'rsuite/dist/rsuite.min.css' layer(base);
@import "tailwindcss" prefix(tw);

tailwind.config.js:

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

**Additional context:**

tailwind/postcss: 4.1.13
gulp-postcss: 10.0.0
spfx: 1.21.

[rozsazoltan]

Off topic

• What's breaking changes from v4?

A small side note unrelated to the issue: since v4, tailwind.config.js is no longer necessary, and TailwindCSS doesn't use it automatically.

• New CSS-first configuration option in v4

Instead of the manually specified content property, automatic source detection has been introduced:

• Automatic Source Detection from TailwindCSS v4
• Adding an external source or a package from within node_modules for detection