Have you experienced this bug with the latest version of the template? <p dir="a

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Tailwind SourceMap/EsBuild Issue about indie-stack HOT 4 OPEN

asciant commented on May 23, 2024

Tailwind SourceMap/EsBuild Issue

from indie-stack.

Comments (4)

csalvador58 commented on May 23, 2024 4

If your using vite, check to make sure your css imports have the ?url syntax. Seemed to fix my issue. https://remix.run/docs/en/main/future/vite#fix-up-css-imports-referenced-in-links

from indie-stack.

Rioba-Ian commented on May 23, 2024 2

If your using vite, check to make sure your css imports have the ?url syntax. Seemed to fix my issue. https://remix.run/docs/en/main/future/vite#fix-up-css-imports-referenced-in-links

Yeah, this solved my issue, if anyone else encounters this is how my root.tsx file looks after creating a remix app from the npx create-remix@latest, in the root.tsx

import {
 Links,
 LiveReload,
 Meta,
 Outlet,
 Scripts,
 ScrollRestoration,
} from "@remix-run/react";
import type { LinksFunction } from "@remix-run/node";

import styles from "./tailwind.css?url";

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

export function Layout({ children }: { children: React.ReactNode }) {
 return (
  <html lang="en">
   <head>
    <meta charSet="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <Meta />
    <Links />
   </head>
   <body>
    {children}
    <ScrollRestoration />
    <Scripts />
    <LiveReload />
   </body>
  </html>
 );
}

export default function App() {
 return <Outlet />;
}