harsh-harlequin

Tailwind css flickering unstyled css in tanstack start

I have my import './globals.css'; in the router.tsx. It's working but an unstyled css flickers before loading of the app.

7 Replies

harsh-harlequinOP•9mo ago

Here is a small repo. https://github.com/webmasterdevlin/tanstack-start-problems

GitHub

GitHub - webmasterdevlin/tanstack-start-problems

Contribute to webmasterdevlin/tanstack-start-problems development by creating an account on GitHub.

vicious-gold•9mo ago

Did you try importing it to the head of your root component? The following works for me:

import globalStyle from '@/global.css?url';


export const Route = createRootRoute({
  ...
  head: () => {
    return {
      meta: [
        ...
      ],
      links: [
        {
          rel: 'stylesheet',
          href: globalStyle,
        },
      ]
    };
  },

  ...

import globalStyle from '@/global.css?url';


export const Route = createRootRoute({
  ...
  head: () => {
    return {
      meta: [
        ...
      ],
      links: [
        {
          rel: 'stylesheet',
          href: globalStyle,
        },
      ]
    };
  },

  ...

harsh-harlequinOP•9mo ago

Does not work alone. The css has to be added to the router.tsx @thazalatte Now, the web app is reloading whenever I navigate to different pages. It won’t reload the browser when I remove these links href css.

vicious-gold•9mo ago

Here is the example most people are using: https://github.com/nekochan0122/tanstack-boilerplate/blob/main/src/routes/__root.tsx#L4

GitHub

tanstack-boilerplate/src/routes/__root.tsx at main · nekochan0122/t...

A fully type-safe boilerplate with a focus on UX and DX, complete with multiple examples. - nekochan0122/tanstack-boilerplate

harsh-harlequinOP•9mo ago

thanks. I will try. It worked! Thanks. But how do you fix this squigly? Cannot find module '../globals.css?url' or its corresponding type declarations.ts(2307).

ratty-blush•9mo ago

Add vite to your tsconfigs “types” property

harsh-harlequinOP•9mo ago

It works! Thanks!

Gaming

Programming

Tailwind css flickering unstyled css in tanstack start

Did you find this page helpful?