Setup tailwind 4 with SPFx and rsuitejs

[Lureno-L]

When I try to use tailwind 4 with rsuitejs, rsuite.min.css is render higher than tailwind.css.

I've done this steps to setup:

1. Create spfx project (obviously), install plugin for tailwind (if not installed)
2. install this packages:

   npm i tailwindcss @tailwindcss/postcss autoprefixer gulp-postcss
   

3. Create somewhere tailwind.css in /src/ folder and put in it following code:

   @import "tailwindcss";
   

4. Put in gulpe.json this code before build.initialize(require('gulp')); (almost there):

   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);
   

5. Finally add in core of spfx typescript import "../../../dist/tailwind.css" and setup button:

<Button className="tw-bg-amber-700 tw-text-5xl">TestButton</Button>

also I added import 'rsuite/dist/rsuite.min.css'; before import tailwind.

Maybe I did something wrong in configuring? Because when I setup almost same steps for tailwind 3 it work on top of rsuitejs.

(I use rsuitejs because it meet minimal requirements to old react version of SPFx).

[wongjn]

Try importing the third-party CSS in your own CSS instead of JS so that you can put it in a cascade layer:

@import 'rsuite/dist/rsuite.min.css' layer(components);

Tailwind rules are all in cascade layers which have lower precedence that CSS rules outside, hence why the Tailwind classes don't work.

[Lureno-L]

Thanks for answer, it work, but, it also fully override rsuitejs style. I've used layer(bas) to somehow apply rsuite css but it seems still override some properties like hover.

So can I make applying css styles in this order:
[default tailwindcss styles] -> [rsuite styles] -> [styles that I apply to element]?

[wongjn]

Yes, layer(components) should do that.

[Lureno-L]

Yes, layer(components) should do that.

If I use layer components styles on page, seems, apply like this:

[rsuite styles] -> [default tailwindcss styles] -> [styles that I apply to element]

because button style of rsuite is not working and only tailwind styles applied.