针对不同HTML元素复用Tailwind样式的最佳工作流探讨

方法1：封装通用图标容器组件 #

创建一个Blade组件（比如resources/views/components/menu-icon.blade.php），把通用样式集中维护，同时接收路由判断参数和图标插槽：

@props(['activeRoute'])

<span class="h-6 w-6 text-gray-500 hover:text-blue-600 {{ request()->routeIs($activeRoute) ? 'text-blue-600' : '' }}">
    {{ $slot }}
</span>

调用时只需传入对应图标和路由判断条件：

<x-menu-icon activeRoute="documents.remove">
    <x-heroicon-o-document-remove />
</x-menu-icon>

<x-menu-icon activeRoute="trucks.index">
    <x-heroicon-o-truck />
</x-menu-icon>

所有通用样式都在容器组件里统一修改，无需重复编辑每个图标代码。

方法2：定义全局样式变量 #

在模板头部（比如布局文件）定义统一的图标样式变量，调用Heroicon时直接引用：

@php
    $menuIconBaseClass = 'h-6 w-6 text-gray-500 hover:text-blue-600';
@endphp

{{-- 文档移除图标 --}}
<x-heroicon-o-document-remove 
    class="{{ $menuIconBaseClass }} {{ request()->routeIs('documents.remove') ? 'text-blue-600' : '' }}"
/>

{{-- 卡车图标 --}}
<x-heroicon-o-truck 
    class="{{ $menuIconBaseClass }} {{ request()->routeIs('trucks.index') ? 'text-blue-600' : '' }}"
/>

这种方式无需新增组件，仅通过变量复用样式，适合样式逻辑简单的场景。

方法3：自定义Tailwind插件扩展类 #

如果项目中这类复用样式较多，可通过Tailwind插件注册自定义组件类，既符合官方扩展规范，又避免重复编写原子类：
在tailwind.config.js中添加插件：

module.exports = {
  // ...其他配置项
  plugins: [
    function({ addComponents }) {
      addComponents({
        '.menu-icon': {
          '@apply h-6 w-6 text-gray-500 hover:text-blue-600': {},
        },
        '.menu-icon-active': {
          '@apply text-blue-600': {},
        }
      })
    }
  ]
}

调用图标时直接使用自定义类：

<x-heroicon-o-document-remove 
    class="menu-icon {{ request()->routeIs('documents.remove') ? 'menu-icon-active' : '' }}"
/>

<x-heroicon-o-truck 
    class="menu-icon {{ request()->routeIs('trucks.index') ? 'menu-icon-active' : '' }}"
/>

内容的提问来源于stack exchange，提问作者IceMaur