如何让tailwind.config.js自动打包Leptos框架的动态类属性？

Tailwind默认是静态扫描文件中的类名，Leptos的class:xxx=条件这种动态语法不在它的默认识别范围内，所以会漏掉这类类名。以下是几种自动提取的方法：

1. 自定义Tailwind的类名提取规则 #

修改你的tailwind.config.js，扩展content配置并添加针对Rust文件的提取逻辑，让Tailwind能识别class:xxx=格式的动态类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{rs,html,js}", // 包含所有Rust、HTML、JS文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  // 自定义提取逻辑，匹配Leptos的class:语法
  extract: {
    rust: (content) => {
      // 捕获class:后面的类名
      const matches = content.match(/class:([a-zA-Z0-9-]+)=/g);
      return matches ? matches.map(match => match.slice(6, -1)) : [];
    }
  }
};

这样Tailwind会扫描你的Rust文件，自动提取所有class:xxx=格式里的类名。

2. 用Leptos的class!宏统一声明类名 #

把静态和动态类都放在class!宏里，让动态类名以字符串形式出现在代码中，Tailwind的静态扫描就能抓到：

use leptos::*;
use leptos_meta::*;

#[component]
fn App(cx: Scope) -> impl IntoView {
    let (count, set_count) = create_signal(cx, 0);
    provide_meta_context(cx);

    view! { cx,
        <Stylesheet id="leptos" href="/pkg/tailwind.css"/>
        <button
            class=class!(
                "p-1 px-2.5 bg-sky-500 hover:bg-sky-700 focus:outline-none focus:ring focus:ring-sky-300 hover:text-white",
                ("rounded-lg", move || count() % 2 == 1)
            )
            on:click=move |_| {
                set_count.update(|n| *n += 1);
            }
        >
        "Click me: " {move || count()}
        </button>
    }
}

3. 专门维护一个动态类清单文件 #

如果不想改Tailwind配置，可在项目里新建一个文件（比如src/tailwind_dynamic.rs），把所有动态用到的类名写在字符串里，让Tailwind扫描到：

// 仅用于让Tailwind识别动态类，无需实际调用
pub fn tailwind_dynamic_classes() {
    // 把所有动态类列在这里
    let _ = "rounded-lg hover:bg-green-500 focus:ring-blue-400";
}

确保这个文件被包含在Tailwind的content配置路径里，Tailwind就会自动打包这些类。

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