Непоследовательное поведение попутного ветра ⇐ CSS

[Гость]

Я работаю над проектом Livewire, пытаюсь применить некоторую конфигурацию темы попутного ветра, но это совершенно не имеет смысла.
Это моя конфигурация Tailwind:
< предварительно>

Код: Выделить всё

theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
colors: {
'blue':  {
light: '#bae6fd',
DEFAULT: '#38bdf8',
dark: '#0369a1'
},
'red': '#be123c'
}
},
}

Then I have this button component

Код: Выделить всё

@props(['color' => 'gray'])

@php
$classes = 'bg-' . $color . ' hover:bg-' . $color . '-dark inline-flex items-center
px-3 py-2 border-transparent rounded-md font-semibold text-xs text-white
uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-
indigo-500 focus:ring-offset-2 transition ease-in-out duration-150'
@endphp

merge([
'type'  => 'submit',
'class' => $classes
]) }}>
{{ $slot }}

Here is the button used

Код: Выделить всё

{{ __('Edit') }}

And here is what happens:

• run

  Код: Выделить всё

  npm run build

  : background white, style classes do not work
• run

  Код: Выделить всё

  npm run build

  again: style properties picked up and works as expected
• run it again: stops working, background is white and no hover effect is applied
• change the button's color property to red and run

  Код: Выделить всё

  npm run build

  : it works, but no hover
• change it back to blue and run command: doesn't work , it completely stopped recognizing the blue theme colors
• change to red and run command: works
  .....
• at some point it stops working even with the red color, hard to keep track of the behaviour.

It feels very unstable, but possible that my approach is wrong, as I'm expecting it to behave as it would with a FE js framework.
Any suggestion and information is much appreciated.


Источник: https://stackoverflow.com/questions/781 ... d-behavior