Compiler too fast for tailwind with res-tailwindcss PPX :)

1

I’m working on React project (Next.js) with Tailwind CSS and @greenlabs/res-tailwindcss PPX.

Everything works as it should until I’m working in dev mode (rescript build -w).

Context:

  1. Tailwind PPX is checking that Tailwind classes I’m using are correct according to generated tailwind.css.
  2. tailwind.css is generated with something like tailwindcss -i ... -o tailwind.css --watch

Problem:

  1. When I change class in .res file to some class I never used so far (but one which exists in Tailwind) and I save the file, rescript compiler give me not found error thanks to ppx. This is expected as tailwind and rescript are running at the same time and tailwind.css isn’t modified yet with new change when rescript build starts.
  2. Tailwind catch up at same time and generate new tailwind.css
  3. When I re-save the file or kill rescript compiller and start it again, no error now as it is found now.

I’m, not sure if I’m making sense :slight_smile: but hopefully at least some.

What would help me would be one of:

  1. have some option to run specific program during rescrit build -w when change is detected.
  2. re-try compiling on error after specified time (1s)
  3. introduce delay in watch mode

I can probably work around this simply by avoiding rescript build -w and using some inotify based script instead, which will run tailwindcss first and rescript build after. But I’m thinking that either I’m blind and there is already option to do this in “standard” way or there are others with same trouble with some solutions. I tried to check relevant docs, but to be honest, I’m little confused with bsconfig/compiler docs and maybe I simply red it wrong.

3 Likes
2

Thank you for using the res-tailwindcss. I wouldn’t expect there are users outside my team. :grinning_face_with_smiling_eyes:

Actually, my team also is suffering from the same problem. Sometimes I think checking the classnames with ppx seems unnecessary overhead in the compilation. :dizzy_face:

Anyway, I’m considering adding more structural design to improve the performance of res-tailwindcss.

Before that, it could be a little help not to see the compilation error due to css file changes. This configuration will trigger another run the compilation if the tailwindcss file is changed.

// bsconfig.json
"sources": [
    {
      "dir": "src",
      "subdirs": true
    },
    {
      "dir": "__tests__",
      "type": "dev"
    },
    {
      "dir": "styles", // where you put the output of tailwindcss
      "type": "dev"
    }
  ],
3 Likes
3

We are also using res-tailwindcss as of last week - it’s great! And we also suffered this problem!

Our solution is that we don’t use watchers, but have a single build script that watches all files changes in our repo, and calls the appropriate compiler/process/script. (It could maybe be a makefile but isn’t).

Before using res-tailwindcss, we would run rescript when a .res file changed, and run tailwind when a .css file changed. However, we now run tailwind when we change a .res file, generating a new .css file, which kicks off rescript. So it sort of reverses the intuitive order, but it follows the inputs: tailwind has .res files as input and rescript now has the tailwind css output as input due to res-tailwindcss.

1 Like
4

Thank your for creating and maintaining it! Btw. I already found some wrong classes thanks to it, those which would be hard to find otherwise. IMHO it is totally worth it :slight_smile:

I belive this is better approach then using lint, at least for me. I can clearly mark parts of code ment for tailwind classes and receive almost instant validation.

Thanks for your bsconfig.json and especially for that small comment with tailwindcss. I had generated styles outside of source code (in .cache) only and it would kick my ass for sure.

2 Likes