如何为Leptos框架配置Tailwind自定义类匹配规则？

完全可以通过在Tailwind配置中添加自定义内容提取规则实现，具体操作如下：

• 打开项目根目录的tailwind.config.js配置文件
• 在content选项中添加针对Rust文件的自定义提取逻辑，匹配Leptos特有的class:<class_name>语法

配置示例：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{rs,html,js}",
    {
      files: ["./src/**/*.rs"],
      extract: {
        rust: (content) => {
          // 匹配所有 class:<类名> 格式的内容，提取出类名
          return content.match(/class:([\w-]+)/g)?.map(item => item.slice(6)) || [];
        }
      }
    }
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

配置说明 #

• 先指定扫描范围，覆盖项目中的Rust、HTML、JS文件
• 自定义rust内容提取器：用正则表达式捕获所有class:开头的类名，去掉前缀后交给Tailwind，这样就能识别示例里的translate-x-20、translate-x-0这类在Leptos属性中定义的类
• 配置完成后，重新运行Tailwind CLI即可生成对应类的CSS样式

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