tailwindcss之动态添加屏幕类的坑:

1>本来想动态修改 lg 条件下，div的宽度, 如下，但是不生效
withDefaults(
  defineProps<{
    isNotificationVisible?: boolean;
    content?: string;
    maxWidth?: string;
  }>(),
  {
    isNotificationVisible: false,
    content: "",
    maxWidth: "25rem",
  }
);
  
<div
    class="w-full"
    :class="`lg:max-w-[${maxWidth}]`"
  >
  
2>通过style可以加载这个动态宽度，但是没法使用 lg 条件
<div
    class="w-full"
    :style="{ maxWidth: maxWidth }"
  >
也可以直接这样:
<div
    class="w-full"
    :style="{ maxWidth }"
  >
  
3>解决 lg 问题
// 使用媒体查询，也不生效
<div
    class="w-full"
    :style="{ '@media (min-width: 1024px)': { maxWidth: maxWidth } }"
  >
  
//下面的方法是可行的
定义:
@layer utilities {
  .lg-dynamic-max-w {
    @apply lg:max-w-[var(--max-width)];
  }
}
  
使用:
<div
    class="w-full lg-dynamic-max-w"
    :style="{ '--max-width': maxWidth }"
  >
原理:
①
@layer utilities 告诉 Tailwind 这是一个自定义工具类。
@apply 指令允许您在自定义类中使用 Tailwind 的原子类。
lg:max-w-[var(--max-width)] 是一个响应式类，它在大屏幕（lg）断点上应用最大宽度。
var(--max-width) 是一个 CSS 变量，它的值可以动态设置。
  
②
class="w-full lg-dynamic-max-w" 应用了我们自定义的响应式类。
:style="{ '--max-width': maxWidth }" 动态设置 CSS 变量的值。
  
③
当屏幕宽度达到 lg 断点时，Tailwind 的响应式系统激活 lg: 前缀的样式。
此时，max-w-[var(--max-width)] 开始生效。
var(--max-width) 的值是通过 Vue 的 :style 绑定动态设置的。
结果是，在大屏幕上，元素获得了一个动态的最大宽度。
  
④
它利用了 Tailwind 的 JIT（即时编译）模式，允许使用任意值。
它结合了 Tailwind 的响应式设计和 CSS 变量的动态性。
通过 @apply，我们创建了一个可重用的类，它既包含 Tailwind 的功能，又允许动态值。
  
⑤
保持了 Tailwind 的响应式特性。
允许动态设置最大宽度。
将响应式逻辑保留在 CSS 中，而不是 JavaScript。
可以在多个组件中重用自定义类。

总结: 这种方法之所以有效，是因为它巧妙地在 Tailwind 的静态类系统和 CSS 变量的动态特性之间架起了一座桥梁。它允许您在保持 Tailwind 工作流程的同时，引入动态值的灵活性。