在react中使用windicss的问题

在React中使用Windi CSS的过程大致需要分为以下几步：

步骤一：安装Windi CSS和相关依赖

1. 使用npm或yarn安装Windi CSS和相关依赖：

npm install -D windicss windi-cli

或者

yarn add -D windicss windi-cli

1. 在项目根目录下创建一个windi.config.js文件，并添加以下内容：

import { defineConfig } from 'windi-css';

export default defineConfig({
  /* 配置项 */
});

步骤二：在React应用中使用Windi CSS

1. 在组件中引入Windi CSS的类名相关方法：

import { clsx } from 'windi-css';

...

function MyComponent(props) {
  return (
    <div className={clsx('bg-blue-500', 'text-white', props.className)}>
      {props.children}
    </div>
  );
}

1. 使用@apply关键字来应用Windi CSS的样式到普通的CSS规则中：

function MyComponent(props) {
  return (
    <div className="my-class">
      <style jsx>{`
        .my-class {
          @apply bg-blue-500 text-white;
        }
      `}</style>
      {props.children}
    </div>
  );
}

示例一：使用Windi CSS定制Card组件

下面是一个使用Windi CSS定制Card组件的示例：

import { h } from 'preact';
import { clsx } from 'windi-css';

function Card(props) {
  const { className = '', children } = props;

  return (
    <div className={clsx('bg-white shadow-sm rounded-2xl p-6', className)}>
      {children}
    </div>
  );
}

export default Card;

在其他组件中使用这个Card组件的时候，我们只需要像下面这样引用即可：

<Card className="border-red-500">
  <h1 className="text-xl font-bold mb-4">Card Title</h1>
  <p className="text-gray-500">Some card content here.</p>
</Card>

这里我们通过传递的className属性来实现了可定制化的效果。

示例二：使用Windi CSS定制AppBar组件

下面是一个使用Windi CSS定制AppBar组件的示例：

import { h } from 'preact';
import { clsx } from 'windi-css';

function AppBar(props) {
  const { className = '', title } = props;

  return (
    <div className={clsx('sticky top-0 bg-white shadow-sm py-2 px-4', className)}>
      <h1 className="text-lg font-bold">{title}</h1>
    </div>
  );
}

export default AppBar;

在其他组件中使用这个AppBar组件的时候，我们只需要像下面这样引用即可：

<AppBar title="My App" className="border-blue-500">
  {/* 其他的组件内容 */}
</AppBar>

同样，我们通过传递的className属性来控制定制化的样式。