php - Laravel conditional tailwind class with default value

Solution:

The string concatenation won't work when purging your CSS. During the purge, it won't consider your logic (it only reads strings as they are) so the classes most likely will be purged. This is mentioned in TailwindCSS docs.

My recommendation is to store that in a blade component and just use a switch-case statement to create the variations. It leads to repetition but at least you will have all that stored in only one place:

@switch($color ?? null)
  @case('red')
    <div class="{{ isset($bg) ? 'text-red-100' : 'text-red-600' }}"></div>
    @break

  @case('green')
    <div class="{{ isset($bg) ? 'text-green-100' : 'text-green-600' }}"></div>
    @break

  @default
    <div class="{{ isset($bg) ? 'text-blue-100' : 'text-blue-600' }}"></div>
@endswitch

Solution:

I had the same issue with my project, I decided to see if adding a comment to my php file with the css variables would work and it did so i saved the switch statement and just inserted :

<!-- bottom-2 top-2 right-2 left-2 -->

Tailwind did then compile with the variables i needed with ccs nano enabled.