使用React的Context渲染样式，即亮/暗模式
或.
使用状态管理库/浏览器的localStorage来设置样式并更改Tailwind中html组件的类

我让我的工作使用的组合看网址，并发送服务器 prop 给客户端。
例如，我让我的后端发送一些样式，如primaryColor。
工作示例如下：
1.在渲染代码之前的页面.tsx中。您从URL中获取tenantId。然后使用该Id从后端检索样式。

async function getSearchParams() {
  const headersInstance = headers();
  const pathname = headersInstance.get("referer");
  if (!pathname) return new URLSearchParams();

  const urlSearchParams = new URLSearchParams(pathname.split("?")[1]);
  return urlSearchParams;
}

async function getStyles(tenantId: string) {
  try {
    const response = await fetch(`http://localhost:3000/themes/${tenantId}`);
    return response.json();
  } catch (error) {
    return {};
  }
}

字符串
1.在服务器组件中调用这些数据并将其发送到客户端组件

export default async function Main({searchParams){
  const tenantId = searchParams?.tenantId || "";
  const styles = await getStyles(tenantId);

  return (
    <div>
      <ClientComponent styles={styles} />
    </div>
  )
}

型
1.在客户端组件中，动态设置全局css变量

const ClientComponent = ({styles}) => {
  useEffect(() => {
    document.documentElement.style.setProperty("--primary-color", primaryColor);
  }, [primaryColor]);

return (
<div className="bg-primary w-100 h-100">
my colour is changed
</div>

型