Tailwind.css in Remix project does not load file or styles

Question

I have tried various methods. I got a 404 for tailwind.css file.

import { LinksFunction } from '@remix-run/node';

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: '/styles/tailwind.css' }
];

with the tailwind.css file located at app/styles/tailwind.css

I then tried using a new method, an import statement like this:

import './styles/tailwind.css';

which fixes the 404 but browser shows the CSS file type is script (JS). Styles are not applied.

Answer 1

Use this code instead of your code:

import type { LinksFunction } from "@remix-run/node";
import stylesheet from "~/styles/tailwind.css?url";

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