Is is possible to remove styles from parent route?

[dpyzo0o]

I have a scenario where I want to use tailwind for my app but not for a specific route. Because tailwind comes with some preflight styles which will break my ui in the specific route. I can of course manually import styles in every route but it is very cumbersome. What I want is I can import tailwind styles in the root route but in the very specific route I can remove the tailwind styles and just import the styles I need.

e.g.

I have three routes in my app:

• routes/index.tsx
• routes/a.tsx
• routes/b.tsx

I want to use tailwindStyles only in routes/index and routes/a, and otherStyles in routes/b

My solution:

// app/routes/index.tsx
export const links = () => {
  return [{ rel: 'stylesheet', href: tailwindStyles }];
}

// app/routes/a.tsx
export const links = () => {
  return [{ rel: 'stylesheet', href: tailwindStyles }];
}

// app/routes/b.tsx
export const links = () => {
  return [{ rel: 'stylesheet', href: otherStyles }];
}

Preferred:

// app/root.tsx
export const links = () => {
  return [{ rel: 'stylesheet', href: tailwindStyles }];
}

// app/routes/b
// currently tailwindStyles will also apply here, I need a way to remove it
export const links = () => {
  return [{ rel: 'stylesheet', href: otherStyles }];
}

Is it somehow possible?

[sergiodxa]

You could use layout routes for that.

1. Create a routes/__tailwind.tsx route where you export the links loading the Tailwind styles and a default export with only an Outlet component.
2. Create a routes/__tailwind folder, any route inside that directory will be nested inside the routes/__tailwind.tsx route so it will have tailwind styles.
3. Create your routes without Tailwind styles inside the routes folder and outside the __tailwind folder, those routes will not be nested inside __tailwind.tsx so they will not have the styles.

routes/__tailwind/a.tsx
routes/__tailwind.tsx
routes/b.tsx

☝️ something like that.

All layout routes starting with __ will not add segments to the URL so you will have /a and /b, without the __tailwind part.

[dpyzo0o]

Wow, I totally missed that! Thanks