Tanstack start without tailwind (css modules, zero runtime css-in-js, anything but tailwind)
I am attempting to implement tanstack start with literally anything but tailwind. I am not for or against tailwind so please dont say "just use tailwind bro", simply I need to something else.
Reason being is I have legacy design systems implemented with styled-components and it is significantly easier to migrate to zero-runtime css-in-js or css modules and our team is quite good at writing clean styles without a million utility classes.
The core error revolves around FOUC (Flash of unstyled content) when the app renders.
I have a starter monorepo here https://github.com/j-mcfarlane/tanstack-start-monorepo that has a FOUC error. It is using pigment css (pigment only works with 18.3 if you upgrade to 19 it wont work).
Additionally there is an open issue on tanstack/router with a css modules example https://github.com/TanStack/router/issues/3023 with the same FOUC issues.
Has anyone gotten tanstack start working with (anything but tailwind) css modules or zero-runtime css in js? Would be grateful for any examples
GitHub
GitHub - j-mcfarlane/tanstack-start-monorepo
Contribute to j-mcfarlane/tanstack-start-monorepo development by creating an account on GitHub.
GitHub
How to use CSS Modules with TanStack Start? · Issue #3023 · TanStac...
Which project does this relate to? Start Describe the bug I'm struggling to make CSS Modules work properly. Currently, the styles are being loaded only on the client, causing a flash of unstyle...
4 Replies
ambitious-aqua•8mo ago
I wrote a separate build step using regular ol' vite to generate the styles and then imported them into root.tsx.
"build:styles": "vite build -c vite.styles.config.ts",
```
//vite.styles.config.ts
export default defineConfig({
plugins: [
tsConfigPaths({
projects: ['./tsconfig.json'],
}),
],
resolve: {
alias: {
'@': '/app',
},
},
build: {
outDir: 'app/css/rendered',
rollupOptions: {
input: [resolve(dirname, './app/client.tsx')],
output: {
assetFileNames: '[name][extname]',
},
external: ['/app/css/rendered/style.css?url'],
},
assetsDir: '.',
copyPublicDir: false,
emptyOutDir: true,
cssCodeSplit: false,
},
});
```
It's pretty dang hacky, and I really hope there's a first-party way to handle css modules soon.adverse-sapphireOP•8mo ago
is this what you did for your repo?
equal-jade•8mo ago
working on supporting this in start right now
already got it working for prod, needs a bit more massaging to work in dev
ambitious-aqua•7mo ago
I hate to necropost, but how are things looking on CSS module support for Tanstack Start?