T
TanStack•3mo ago
fascinating-indigo

How to install Tailwind with vite and @tailwindcss/vite?

Is there a guide on how to install Tailwind with TSS (latest version)?
8 Replies
fascinating-indigo
fascinating-indigoOP•3mo ago
If I follow: https://tailwindcss.com/docs/installation/using-vite Then I get weird errors like:
Error: Can't resolve 'tailwindcss' in: @import "tailwindcss"; (of src/client/styles/main.css)
main.css is imported in __root.tsx like so: 
import "~/client/styles/main.css";
import "~/client/styles/main.css";
Vite config: 
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss(), tsConfigPaths(), tanstackStart()],
});
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  plugins: [tailwindcss(), tsConfigPaths(), tanstackStart()],
});
main.css: 
@import "tailwindcss";

@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";

@tailwind base;
@tailwind components;
@tailwind utilities;
deep-jade
deep-jade•3mo ago
You are using the old configuration V4 use only @import tailwindcss in the css file.
fascinating-indigo
fascinating-indigoOP•3mo ago
can I use v3?
deep-jade
deep-jade•3mo ago
Can, but I really don't recommend you to do it since every component or lib is migrating to V4 Also, it is better to deal with theming, for example
fascinating-indigo
fascinating-indigoOP•3mo ago
v4 depends on color-mix() which has a 91% browser support on caniuse Not ready to have the incompatibility with 1/10 of users
deep-jade
deep-jade•3mo ago
Ok In __root you must import your css like this: import appCss from '@/styles/app.css?url'; Than you use it inside the header parameter: export const Route = createRootRoute({ head: () => ({ meta: [ { charSet: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { title: 'title' } ], links: [ {rel: 'stylesheet', href: appCss}, {rel: 'icon', href: '/icon.svg'} ] }), component: RootComponent });
fascinating-indigo
fascinating-indigoOP•3mo ago
Thank you very much 🙏 MVP
deep-jade
deep-jade•3mo ago
If the error is on linting, you can use the official tailwind extension for vs code and configure your vscode: "files.associations": { ".css": "tailwindcss", ".scss": "tailwindcss" }, Sometimes eslint shows some errors that simply don't happen in the application itself. You are welcome

Did you find this page helpful?