Can't use it out of the box with esbuild

[peterberkenbosch]

css    | CssSyntaxError: tailwindcss: /Users/peterberkenbosch/code/nex13/rapid/app/assets/stylesheets/shadcn.css:223:3: The `text-destructive` class does not exist. If `text-destructive` is a custom class, make sure it is defined within a `@layer` directive.

Trying to wrap it in a @layer does not seem to work for me.

[aviflombaum]

Did you modify your tailwind.config.js to include shadcn.tailwind.js?

https://shadcn.rails-components.com/docs/installation#shadcn-tailwind-js

Basically you have to include the shadcn.tailwind.js in your main tailwind.config.js or entirely overwrite it.

Let me know if this doesn't work, appreciate your patience and you trying this out!

[peterberkenbosch]

Yeah, did that.. will setup an public repo in a little bit with some samples to try to figure it out.

[aviflombaum]

I've dealt with this before, I can't remember how I fixed it. Is this an existing app or a new one that you're integrating with...did you make any edits or is this out of the box? Oh esbuild - hmm, I haven't tested it on that yet, I should've thats a big oversight, I'll look into that shortly..

[peterberkenbosch]

No worries, it's on my starter app (and a rails edge one).. playground with my current problem: https://github.com/peterberkenbosch/shadcn-demo

I have dealt with this before too, and will keep looking what I needed to do to solve this. Was hoping that postcss nesting was picking it up properly. Will google and play some more.

[aviflombaum]

Hey - so you had a slight misconfig in your tailwind.config.js

Here's what it looks like now:

const shadcnConfig = require("./config/shadcn.tailwind");

module.exports = {
  plugins: [
    require("@tailwindcss/forms"),
    require("@tailwindcss/typography"),
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/line-clamp"),
    require("@tailwindcss/container-queries"),
  ],

  content: [
    "./app/helpers/**/*.rb",
    "./app/javascript/**/*.js",
    "./app/views/**/*.erb",
  ],

  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  ...shadcnConfig,
};

Basically by having it above the theme/extend it was clearing it out.

[peterberkenbosch]

@aviflombaum duh.. thanks man! Working like a charm now!