Tailwind Warning before install

[sergitejada]

CssSyntaxError: tailwindcss: C:\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.

label.error { @apply text-destructive; }

[aviflombaum]

Generally that means that your tailwind.config.js and shadcn.config.js are not working well together. What's your tailwind.config.js look like?

[sergitejada]

I use this

[aviflombaum]

Ya, I might try the following (I don't get that error but just to do what it's telling me)

Move

input.error {
  @apply border-red-400;
}

label.error {
  @apply text-destructive;
}

To application.tailwind.css

And put it in:

@layer base {
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    width: 100%;
  }

  :root {
    --pink: 301 98% 50% 0.88;
  }
input.error {
  @apply border-red-400;
}

label.error {
  @apply text-destructive;
}
}

So it's within the @layer directive.

Basically, text-destructive is a class that gets generated after shadcn.tailwind.js defines its custom classes.

Try this also just making your tailwind.config.js

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

module.exports = {
  ...shadcnConfig,
}

shadcnConfig has all the Tailwind defaults anyway. That will basically confirm whether it's as I suspected that they aren't playing well together. For example, you're putting shadcnConfig within theme, maybe it needs to be at the top level.

[sergitejada]

I have tried this and it works better const shadcnConfig = require("./shadcn.tailwind.js");

module.exports = { ...shadcnConfig, } but now I have another error with one of the tailwind libraries. @tailwindcss/container-queries

[aviflombaum]

OH! Just add the container-queries plugin to shadcn.tailwind.js in the plugins section!

[sergitejada]

By default it looks like this, but it doesn't work.