我尝试使用Tailwind CSS构建组件库！

<code class="bash">npm create vite@latest my-ui-library --template react
cd my-ui-library
npm install</code>

<code class="bash">npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p</code>

<code class="javascript">export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};</code>

<code class="css">@tailwind base;
@tailwind components;
@tailwind utilities;</code>

<code class="javascript">const Button = ({ text, onClick, variant = "primary" }) => {
  const baseStyles = "px-4 py-2 font-semibold rounded-md focus:outline-none";
  const variants = {
    primary: "bg-blue-500 text-white hover:bg-blue-600",
    secondary: "bg-gray-500 text-white hover:bg-gray-600",
    danger: "bg-red-500 text-white hover:bg-red-600",
  };

  return (
    <button className={`${baseStyles} ${variants[variant]}`} onClick={onClick}>
      {text}
    </button>
  );
};

export default Button;</code>

<code class="jsx"><Button text="点击我" onClick={() => alert("按钮被点击！")} variant="primary" /></code>

<code class="javascript">const Card = ({ title, description }) => {
  return (
    <div className="bg-white shadow-md rounded-lg p-4 border border-gray-200">
      <h2 className="text-lg font-bold">{title}</h2>
      <p className="text-gray-600">{description}</p>
    </div>
  );
};

export default Card;</code>

<code class="jsx"><Card title="Tailwind 真棒！" description="这是一个可复用的卡片组件。" /></code>

<code class="json">{
  "name": "my-tailwind-ui",
  "version": "1.0.0",
  "main": "dist/index.js", // 确保dist/index.js存在
  "scripts": {
    "build": "tsc" //  根据你的构建流程调整
  }
}</code>

<code class="bash">npm login
npm publish</code>

<code class="bash">npm install my-tailwind-ui</code>