Laravel 组件渲染和 TailwindCSS v3

Question

我有这个

views/components/flash-status-message

组件：

@php use App\Enums\FlashStatuses; @endphp
@foreach(FlashStatuses::values() as $type)
    @if(Session::has($type))
        @php $color = FlashStatuses::from($type)->color(); @endphp
        <div id="flash-message" class="fixed top-4 right-4 z-50">
            <div class="flex items-center bg-{{$color}}-100 border-l-4 border-{{$color}}-500 text-{{$color}}-700 px-2 py-4 rounded-lg shadow-lg max-w-sm lg:max-w-xs">
                <div class="ml-3">
                    <p class="text-sm font-semibold text-{{$color}}-700">{{ __(ucfirst($type)) }}!</p>
                    <p class="text-sm text-{{$color}}-700">{{ Session::get($type) }}</p>
                </div>
                <div class="bg-{{$color}}-100"></div>
                <button id="flash-message-close"
                        class="ml-auto text-{{$color}}-500 hover:text-{{$color}}-700 focus:outline-none">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        </div>
    @endif
@endforeach

@vite('resources/js/flash-message.js')

并且在

layouts/default.blade.php

中我使用我的组件

<x-flash-status-message />

我拥有的 HTML：

<div class="flex items-center bg-green-100 border-l-4 border-green-500 text-green-700 px-2 py-4 rounded-lg shadow-lg max-w-sm lg:max-w-xs">
                <div class="ml-3">
                    <p class="text-sm font-semibold text-green-700">Success!</p>
                    <p class="text-sm text-green-700">test</p>
                </div>
                <div class="bg-green-100"></div>
                <button id="flash-message-close" class="ml-auto text-green-500 hover:text-green-700 focus:outline-none">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>

正如你所看到的，我使用 TailwindCSS v3，似乎颜色取决于正确渲染的状态（在本例中为成功），但实际上我有黑色（TailwindCSS 默认），并且似乎颜色未正确应用。我想知道为什么，可能是因为 @foreach 或组件性质或其他原因，所以任何想法都会受到赞赏。预先感谢！

我期望我能在该组件的 html 中看到带有颜色的 Flash 消息。不幸的是我没有。

Answer 1

我遇到了同样的问题，这就是我发现的。

问题在于 Tailwind CSS 如何动态处理类名。 Tailwind 在构建时生成必要的 CSS 类，这意味着如果您使用像

bg-{{$color}}-100

这样的动态值，它将无法被识别，因为 Tailwind 在构建时不知道所有可能的值。

这里有一些解决方法： （对代码示例表示歉意，我正在使用 React，但底层方面保持不变）

1。使用带有完整类名的模板文字

Tailwind 要求代码中包含完整的类名。 动态更改类时，可以使用条件逻辑 动态设置类名。

但是，这仍然仅适用于 Tailwind 在构建时知道的特定颜色。

<Link
  to="/home"
  className={`text-${appTheme === 'blue' ? 'blue' : appTheme}-500 mb-0 silkscreen-regular px-0 py-2 rounded-md`}
  aria-current="page"
>

2。确保为所有主题生成 Tailwind 类

如果您使用多个主题（如

blue

、

red

、

green

等），请确保所有主题颜色类（

text-blue-500

、

text-red-500

等）都包含在您的最终结果中CSS。 Tailwind 需要看到这些类名才能生成对应的样式。

您可以通过在 Tailwind 配置中使用主题对象来实现此目的。

3.推荐的条件类方法

您可以显式创建主题图并根据值动态设置类

const themeClasses = {
    blue: 'text-blue-500',
    red: 'text-red-500',
    green: 'text-green-500',
    // add more colors as needed
};

<Link
  to="/home"
  className={`${themeClasses[appTheme] || 'text-blue-500'} mb-0 silkscreen-regular px-0 py-2 rounded-md`}
  aria-current="page"
>
  Home
</Link>

4。与 Tailwind 的接近

@apply

如果您想要更大的灵活性，您可以在 Tailwind 的配置文件中定义自己的配色方案 (

tailwind.config.js

)，让您可以更好地控制主题并动态应用样式。

在

tailwind.config.js

上配置颜色

module.exports = {
  theme: {
    extend: {
      colors: {
        'theme-blue': '#1DA1F2',
        'theme-red': '#E0245E',
        'theme-green': '#17BF63',
      },
    },
  },
  // other config...
};

使用基于主题或预定义颜色的动态类

<Link
  to="/home"
  className={`text-theme-${appTheme} mb-0 silkscreen-regular px-0 py-2 rounded-md`}
  aria-current="page"
>
  Home
</Link>