Blade组件动态Tailwind类在Vite打包中失效的最佳实践咨询

方案1：预定义尺寸集合，映射到具体类 #

Tailwind依赖静态扫描类名，提前定义允许的尺寸参数与对应类的映射，既保留动态传参能力，又能让打包工具识别到所有可能用到的类。

示例代码：

@props(['size' => 'md'])
@php
    $sizeMap = [
        'sm' => 'h-8 w-8',
        'md' => 'h-10 w-10',
        'lg' => 'h-16 w-16',
        'xl' => 'h-24 w-24'
    ];
    // 处理非法参数，默认返回md规格的类
    $appliedClasses = $sizeMap[$size] ?? $sizeMap['md'];
@endphp
<img class="mx-auto {{ $appliedClasses }} rounded-full" src="https://place-hold.it/256">

使用时只需传入sm/md等预设标识，既保证组件灵活性，又不会出现类被打包工具丢弃的问题。

方案2：自定义CSS变量结合动态类语法 #

如果需要支持任意数值尺寸，可通过自定义CSS变量实现，同时利用Tailwind的动态类语法兼容扫描机制。

步骤1：在tailwind.config.js中扩展自定义属性：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      '--image-size': '10rem',
    },
  },
}

步骤2：修改Blade组件，通过内联样式绑定动态值：

@props(['size' => 10])
{{-- 可根据需求将size转为px/rem等单位 --}}
<img style="--image-size: {{ $size }}rem" class="mx-auto h-[var(--image-size)] w-[var(--image-size)] rounded-full" src="https://place-hold.it/256">

这种方式支持任意数值传参，同时Tailwind能识别h-[var(--image-size)]这类语法，不会丢弃相关样式。

方案3：用safelist强制保留目标类 #

如果能明确所有可能用到的尺寸值，可在Tailwind配置中将这些类加入safelist，强制打包工具保留它们。

示例tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  safelist: [
    {
      pattern: /h-(8|10|16|24)/, // 匹配h-8、h-10等尺寸类
      variants: ['responsive'], // 如需响应式变体可添加
    },
    {
      pattern: /w-(8|10|16|24)/,
      variants: ['responsive'],
    }
  ],
  // 其他配置项...
}

组件可保持原有写法：

@props(['size' => 10])
<img class="mx-auto h-{{ $size }} w-{{ $size }} rounded-full" src="https://place-hold.it/256">

注意：此方案仅适用于尺寸值有限的场景，若允许任意数值，会导致打包体积过大，不推荐使用。

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