Alert Background Color Not Working

[nubinter]

Aside from alert-success class, all the other color class for alert not working for me. i try alert-warning, alert-error and alert-info but none of it display the correct color background. except alert-success. Please help me.

[saadeghi]

Make sure your class names are not half-string/half-variable. Use classname string as a whole.

❌ This doesn't work:

<div class="alert-{{ error ? 'warning' : 'info' }}"></div>

✅ This works:

<div class="{{ error ? 'alert-warning' : 'alert-info' }}"></div>

Read more here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

[mie6996]

Nice. Simple but effective

[nubinter]

Im sorry, i think the problem is in the way I build the css and js file with laravel mix. If i use CDN the styling will looks good, but if i switch to using the locally generated CSS file, the layout will be broken. can you give me an example on how to build the daisyUI and tailwind using laravel mix?

[saadeghi]

It doesn't matter what template language you're using. It's about how Tailwind CSS finds the class names inside your template files and generate CSS ONLY for the class names it finds.

Using CDN is working for you because the CSS files is including ALL class names (whether you have the class names inside your templates or not) but if the locally generated CSS lacks SOME styles, it means Tailwind CSS can not find the string inside your template files.

Using Tailwind CSS + Laravel (with or without daisyUI) is the same: https://tailwindcss.com/docs/guides/laravel
After that you just need to install daisyUI and add it to tailwind.config.js file: https://daisyui.com/docs/install/

If some class names are not getting generated, make sure:

1. Your content config is including the path to ALL your template files.
2. You're using class names as a whole string (like I mentioned on my previous comment 👆)

[nubinter]

thank you for your reply, i think the problem is with the way i write my content config
here is my code
content: [ 'vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', 'storage/framework/views/*.php', 'resources/views/tailwind/*.blade.php', 'resources/views/layouts/tailwind/*.blade.php', ],

my blade file for daisyUI are located at resources/views/tailwind
is the code above incorrect?

[saadeghi]

If all of the HTML code that contains Tailwind or daisyUI class names exist directly inside these directories, that's correct.
If there are subdirectories, you should use this pattern instead: /**/*.php
Like: 'resources/views/**/*.blade.php'

[nubinter]

thank you

[darkterminal]

OMG!!! 🌟 You're look ✨

[thiagomajesk]

Hey @saadeghi, I seem to have caught a weird behavior today specific to the alert component. I'm not sure whether this is related to the previous question but I'm positive it's not a misconfiguration issue (since it works for other cases in the same file).

This does not work for me:

<div class="alert alert-info shadow-lg"></div>

The alert-info class is not being generated at all, but it is for btn-info. For some reason, it seems to be affecting only the alert class and not others that I've tested. This is the daisyui configuration I'm using:

daisyui: {
    styled: true,
    themes: false,
    base: true,
    utils: false,
    themes: [
      {
        default: {
          "primary": "#ffb10f",
          "info": "#a9d5ea",
          "--rounded-btn": "0.25rem",
          "--rounded-box": "0.25rem"
        }
      }
    ]

PS.: I'm using daisyui v2.15.3 and recently upgraded to tailwindcss v3.1.2 and the problem still persists.

[saadeghi]

@thiagomajesk I can't help about this unless you provide a sample repo for reproduction.
But it sounds like one of these might be the issue:

• your content config is not specifying the routes to all your HTML files
• You're using half-string/half-variable class names. Read Don't construct class names dynamically section

[thiagomajesk]

@saadeghi see the reference on this issue: #853. None of those apply, the thing is the configuration key that is required to enable those variants is not obviously documented. Actually, to be more precise, it's a problem of nomenclature first, that ends up impacting how one interprets the config docs.

I think if we manage to normalize some of the nomenclatures and make it more obvious what configuration fits what purpose we won't' have this type of problem with DaisyUI anymore.

I think you can close this since the "problem" is better specified in the issue I've created. Cheers!

[jagdish1o1]

I know it's kinda late but I'm just gonna drop the solution here.

add safelist in your tailwind config file and use pattern to render some classes by default.

safelist: [ { pattern: /alert-+/ } ] ...

safelist accepts array, you can also add single class or use patterns to dynamically render a pattern.

Doc