mkfizi's avatar

Using configuration file to store TailwindCSS classes

I'm using a configuration file to store tailwind classes. The idea is to make a dynamic component and simply call the class from configuration file base prop call on a component.

config/component.php

return [
    'button' => [
        'success' => 'bg-green-500',
        'danger' => 'bg-red-500',
        'warning' => 'bg-amber-500',
    ],
];

button.blade.php

@php
  $stateClass = config('component.button.'.$state);
@endphp
<button class="{{ $stateClass }}"> {{ $slot }} </button>

calling the component

<x-button state="success">Success Button</x-button>

It's not conventional but aside from using multiple if elses, I'd prefer this method more. Are there any cons for this implementation? Can you suggest a better way to do this?

0 likes
1 reply

Please or to participate in this conversation.