T
TanStack•5mo ago
fair-rose

Tailwind V4 + Tanstack Starter with Tailwind Vite instead of postcss

Any idea why we still need a postcss.config.ts for tanstack starter even I have added the vite.config.ts. Since we're using @tailwind/vite the postcss could be ignored. vite.configs.ts 
import { defineConfig, mergeConfig } from 'vite';
import { tanstackViteConfig } from '@tanstack/config/vite';
import tailwindcss from "@tailwindcss/vite";
import path from "path"

const config = defineConfig({
  plugins: [tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "~": path.resolve(__dirname, "./src"),
    },
  },
});

export default mergeConfig(
  config,
  tanstackViteConfig({
    entry: './src/index.ts',
    srcDir: './src',
  }),
);
import { defineConfig, mergeConfig } from 'vite';
import { tanstackViteConfig } from '@tanstack/config/vite';
import tailwindcss from "@tailwindcss/vite";
import path from "path"

const config = defineConfig({
  plugins: [tailwindcss()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "~": path.resolve(__dirname, "./src"),
    },
  },
});

export default mergeConfig(
  config,
  tanstackViteConfig({
    entry: './src/index.ts',
    srcDir: './src',
  }),
);
postcss.config.ts (Can't be removed!) 
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
}
__root.ts 
import appCss from "@/index.css?url"
// tried also import @/index.css

links: [
      {
        rel: 'stylesheet',
        href: appCss,
      },
]
import appCss from "@/index.css?url"
// tried also import @/index.css

links: [
      {
        rel: 'stylesheet',
        href: appCss,
      },
]
index.css 
@import "tailwindcss";
@import "tailwindcss";
5 Replies
unwilling-turquoise
unwilling-turquoise•5mo ago
you shouldnt need postcss, @tailwindcss/vite is enough. i think you need to set the source path in index.css, see here: https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path e.g. 
@import "tailwindcss" source("../");
@import "tailwindcss" source("../");
and i have a template with this setup for reference: https://github.com/dotnize/react-tanstarter
fair-rose
fair-roseOP•5mo ago
Ah thanks! I put them in to the vite.config.ts instead of app.config 🙏 Nice one! I'm currently building some app too with it. Was looking for a nuxt in the react world and found it. But I'm bit worried about the ssr seems to be still in beta
variable-lime
variable-lime•5mo ago
no, remove the vite.config.ts fully everything needs to be in app.config.ts for now at least, until we have removed vinxi
fair-rose
fair-roseOP•5mo ago
Yeah i meant i put them in the vconf before. Now in app config it works thx
mute-gold
mute-gold•4mo ago
Has something changed in this setup? I have the same problem and adding source("../../"); didn't help 😦

Did you find this page helpful?