Can't set Tailwind colors when using Laravel-CodePudding

            @foreach ($tags as $tag)
                <a href="#" >#{{$tag->name}}</a>   
            @endforeach

I'm trying to show some hashtags with the correct name and color being pulled from a database. The info is all there, but for some reason, the colors do not work when being set like this. They show up as classes when inspecting, but have no effect.

<a href="#" >#roleplay</a>

If I remove the {{}}'s and enter the color manually, as it is in the database, the colors show up correctly. Also worth a mention that sometimes the color would show up for one a tag, but not for the others.

CodePudding user response：

Tailwind doesn’t handle dynamic class names well and even says in its documentation to not construct class names dynamically.

What you could do is either store the entire tag class in your database (text-blue-500), or store just the colour and construct the class name in your controller then provide that to your view as part of the tag data.

CodePudding user response：

From the tailwind documentation, dynamically generated class names must be explicitly included in their safelist.

tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'text-2xl',
    'text-3xl',
    {
      pattern: /bg-(red|green|blue)-(100|200|300)/,
    },
  ],
  // ...
}

The above config will allow for exceptions of specific tags - like text-2xl or those following a regex pattern.