Tailwind fails to find its styles after adding the plugin

[luizkowalski]

hey!

I have an app running with DaisyUI and a couple of custom styles like this:

.sumiu-gradient-rules {
  @apply bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-500;
  @apply dark:from-blue-600  dark:to-purple-400;
}

as soon as I add the plugin, without any config, just require("@catppuccin/tailwindcss"), I start to see errors like this

14:04:45 css.1  | Rebuilding...
14:04:45 css.1  | CssSyntaxError: tailwindcss: /Users/luiz/Projects/sumiu/app/assets/stylesheets/application.tailwind.css:10:3: The `focus:ring-blue-400` class does not exist. If `focus:ring-blue-400` is a custom class, make sure it is defined within a `@layer` directive.
14:04:45 css.1  |
14:04:45 css.1  |    8 |   @apply text-gray-900 bg-gray-50 rounded-lg placeholder:text-slate-400;
14:04:45 css.1  |    9 |   @apply dark:bg-[#1f2129] dark:border-gray-600 dark:text-white dark:placeholder:text-slate-500;
14:04:45 css.1  | > 10 |   @apply focus:outline-none focus:ring-1 focus:ring-blue-400 focus:border-blue-400;

ring-blue-400 is a class from tailwind and now it can't be found. It happens to a number of other classes as well, like from-pink-400, text-blue-900, etc.

[nekowinston]

Hi there :wave: Thanks for raising the issue, could you please let me know which versions of Tailwind and DaisyUI you are using?

I'll try to reproduce the issue later today.

[luizkowalski]

daisyUI: 2.25.0

tailwindcss: 3.1.8

[nekowinston]

Sorry for not responding back then, IIRC I tried to reproduce it in a minimal setup but wasn't able to replicate the issue.

Please open a new issue if a similar problem still occurs in the current release.

Edit: I found my old repo trying to replicate this: This issue can be worked around by specifying a prefix for the plugin:

    require("@catppuccin/tailwindcss")({ prefix: "ctp" }),

So bg-red won't be overridden by Catppuccin red, and won't lose its shades. bg-ctp-red will be the Catppuccin red instead.

[nekowinston]

Finally managed to fix this for good, shades for default colors such as red, green, blue, etc. should work now, while keeping bg-red as the Catppuccin red, even when the prefix isn't specified.

Apologies for the lack of a response for such a long time again.