[Feature]: Better support of postcss and tailwindcss

[hanayashiki]

What is the new or updated feature that you are suggesting?

Include building css into the building pipeline, provides some kind of config, just like nextjs/cra...

Why should this feature be included?

Now, to use tailwindcss, the documentation suggests using tailwindcss or postcss as a single process, and run its watch command together with remix. This approach works, but consider the following situation in development:

1. The user changes className

- <div className="bg-black" />
+ <div className="bg-white" />

2. remix watch catches the change

3. tailwindcss catches the change, too.

4. remix reloads the change, the className is reflected on the page, but because the corresponding css hasn't been generated and loaded.

5. tailwindcss completes, but the page doesn't refresh (might be due to throttling). The user needs to refresh the page by hand.

[ccssmnn]

Have you ever experienced this, or is this an assumption? When changing my tailwind.config.js, I see the following in my terminal:

[0] Rebuilding...
[0] Done in 59ms.
[1] 💿 File changed: app/tailwind.css
[1] 💿 Rebuilding...
[1] 💿 Rebuilt in 115ms

Remix is watching the generated CSS and rebuilding after tailwind is updating it. We have fast tailwind + remix right here. Plugging them together via the CSS file & running parallel processes is so simple. Why adding more complexity for getting the very same result?

[hanayashiki]

Have you ever experienced this, or is this an assumption? When changing my tailwind.config.js, I see the following in my terminal:

[0] Rebuilding...
[0] Done in 59ms.
[1] 💿 File changed: app/tailwind.css
[1] 💿 Rebuilding...
[1] 💿 Rebuilt in 115ms

Remix is watching the generated CSS and rebuilding after tailwind is updating it. We have fast tailwind + remix right here. Plugging them together via the CSS file & running parallel processes is so simple. Why adding more complexity for getting the very same result?

Oh yes... That might be due to I'm using miniflare. For me, the output of the second time rebuilding is skipped maybe because of the throttling of miniflare's watch.

1. changes in jsx
2. jsx get rebundled by remix
3. worker.js get rebundled by esbuild
4. tailwind refreshes
5. the page is refreshed by remix's client side code
6. remix rebundled with correct tailwind (step 3 is skipped maybe because the interval is very short)
7. users don't see the latest change because worker.js is not rebundled

I still think it is necessary to include css into the building flow. You see, even in normal process, the result it only correct when it is bundled twice. (one for js change, one for css change). This might be okay for small apps, but it looks a little bit ugly and wastes even more time for bigger projects.

[ccssmnn]

I'm not that much into build tools. I can only imagine adding complexity to the Remix build system could make every single refresh slower. Keeping them separate means that Tailwind can keep its build times fast, Remix can keep its build times fast.

And because they are so fast, you're experiencing this issue using miniflare 😂

[hanayashiki]

I'm not that much into build tools. I can only imagine adding complexity to the Remix build system could make every single refresh slower. Keeping them separate means that Tailwind can keep its build times fast, Remix can keep its build times fast.

And because they are so fast, you're experiencing this issue using miniflare 😂

With esbuild I think it is easy to incorporate the css building flow, i.e. taking postcss, etc into account instead of asking the user to start a new cli tab/use concurrently to handle that by self.

[revelt]

During the introduction video in late November, Michael Jackson mentioned they "would prefer solutions that would not require us to modify our compiler" — https://youtu.be/wsJaUjd1rUo?t=3506

The setups vary a lot user-by-user — some don't use Tailwind, some don't use PostCSS and use SCSS, there's also style-dictionary generating design tokens — setups vary a lot. I think it's wise Remix stays away from styling, at least at this stage.