Tailwind not working in remix 1.17.1

[mhanifmuhsin]

I have problem with tailwind ,

How to fix it ? thank's

this is sample code repository

[MichaelDeBoey]

CC/ @markdalgleish

[kiliman]

The issue is with the links export in root.tsx. If you don't have a CSS bundle, the ternary will always return [], so it doesn't include the tailwind styles. Remix is building the CSS file just fine. You can look in /public/build/_assets.

Change links from

export const links: LinksFunction = () => [
  ...(cssBundleHref
    ? [
        { rel: "stylesheet", href: cssBundleHref },
        { rel: "stylesheet", href: styles },
      ]
    : []),
];

to this

export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];

[MichaelDeBoey]

@mhanifmuhsin As @kiliman mentioned it's because of the cssBundleHref check: you added tailwind into that check, instead of putting it inside the root array that's returned from links

[mhanifmuhsin]

thank you for helping @MichaelDeBoey and @kiliman

[Mihai-github]

Can someone give me a hand and explain why it is not working correctly with any method used?
I feel like there's not even a support team for this since every method tried today is not working 100%

[kiliman]

We try to help out as much as possible. As you can see above, we were able to resolve the OPs issue on the same day.

Please show what you're trying to do and hopefully, we can help.

[Mihai-github]

Hey there, apologies for the delayed response. Good news—I managed to figure out my issue and resolved it for the time being.

I have a question that you might have some insights on. Are there any plans for Remix.js to support .module files and .scss? I haven't come across any information on this topic, and I'm quite curious about it. It can be a bit tedious to compile SCSS code to CSS separately, and having the convenience of using :global would be really beneficial at times.

[Disorrder]

Still not working on clear setup. I think, it's something with postcss, it doesn't process at all
Works good on remix 2! But I need to test remix 1

[kiliman]

Remix added automatic support for Tailwind starting in Remix v1.16. Make sure you follow the directions to enable Tailwind support https://remix.run/docs/en/1.16.0/guides/styling#tailwind-css

In particular, you need to update remix.config.js to enable Tailwind.

/** @type {import('@remix-run/dev').AppConfig} */
module.exports = {
  tailwind: true,
  // ...
};