[bug]: Default styles are not applied when using Remix + Vite.

[alex-mironov]

Describe the bug

I've installed Remix + Shadcn as described here. Unfortunately the default styling doesn't seem to be applied.

    <div className="px-2 flex flex-col gap-2 w-[100px]">
      <Button>Click me</Button>
      <Button variant={'secondary'}>Click me</Button>
      <Button variant={'outline'}>Click me</Button>
    </div>

Here is the image of how button looks like:

Here is the newly created repo with all the source code - https://github.com/alex-mironov/remix-shadcn.

Here is the project structure and config files:

tailwind.config.ts

globals.css

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "app/components",
    "utils": "app/lib/utils"
  }
}

vite.config.ts

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
    }),
    tsconfigPaths(),
  ],
});

Affected component/components

Button

How to reproduce

1. Follow instructions in the documentation https://ui.shadcn.com/docs/installation/remix.
2. Install any component, e.g. button:

   npx shadcn-ui@latest add button

3. Use the button:

   <div className="px-2 flex flex-col gap-2 w-[100px]">
     <Button>Click me</Button>
     <Button variant={'secondary'}>Click me</Button>
     <Button variant={'outline'}>Click me</Button>
   </div>

   Result:

   

Codesandbox/StackBlitz link

https://github.com/alex-mironov/remix-shadcn

Logs

No response

System Info

macos, any browser
Node.js - v20.14.0

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[alex-mironov]

Resolved the issue, apparently wrong css file was specified in components.json:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",

    // HERE: instead of this
    // "css": "app/globals.css",

    // use this
    "css": "app/tailwind.css", 

    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "app/components",
    "utils": "app/lib/utils"
  }
}

Merged both global.css and tailwind.css and removed global.css.