Tailwind v4 on TanStack Start
Hello, has anyone managed to set up Tailwind v4 on TanStack Start? Because for me, it works in the dev environment but not in the build environment
6 Replies
flat-fuchsia•8mo ago
@アラン you need to specifiy the root for tailwind to scan your classes, in your styles.css
@import "tailwindcss" source("../")modern-teal•8mo ago
since i didn't know this; sharing - https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path
Detecting classes in source files - Core concepts
Understanding and customizing how Tailwind scans your source files.
genetic-orange•8mo ago
awesome thank you guys @notKamui @DiamondDragon ♥️
correct-apricotOP•8mo ago
thanks, I found another solution :
// app/routes/__root.tsx
import appCss from "../styles/styles.css?url"
export const Route = createRootRoute({
head: () => ({
meta: [
{
charSet: 'utf-8',
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{
title: 'TanStack Start Starter',
},
],
links: [
{ rel: "stylesheet", href: appCss },
],
}),
component: RootComponent,
notFoundComponent: () => <div>Not Found</div>,
})
adverse-sapphire•8mo ago
how is that "another" solution? you still need the source set in the css file
otherwise you will run into hydration errors
flat-fuchsia•8mo ago
?
what do you mean "another solution", how were you importing the css before ? This is how you ARE supposed to do it, even before tailwind v4