TWC 是一个轻量级库，可以在一行代码中创建 Tailwind 组件，减少代码量，加快构建速度。

主要特性

• ⚡️ 轻量级 - 仅 0.65kb
• ✨ 所有编辑器中的自动完成
• 根据 props 自适应样式
• ♻️ 使用 asChild 属性重用类
• 适用于所有组件
• 兼容 React 服务器组件
• 一流的 tailwind-merge 和 cva 支持

代码示例

将一个 React 组件转换为一行代码。

// Beforeimport * as React from "react";import clsx from "clsx"; const Card = React.forwardRef<  HTMLDivElement,  React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (  <div    ref={ref}    className={clsx(      "rounded-lg border bg-slate-100 text-white shadow-sm",      className,    )}    {...props}  />));// Afterimport { twc } from "react-twc"; const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;

快速上手

1.快速安装：

npm i react-twc# oryarn add react-twc

2.在编辑器中设置自动完成功能：

在 VSCode 中安装 Tailwind CSS IntelliSense 扩展。

在 settings.json 中增加如下配置：

{  "tailwindCSS.experimental.classRegex": [    "twc\.[^`]+`([^`]*)`",    "twc\(.*?\).*?`([^)]*)",    ["twc\.[^`]+\(([^)]*)\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],    ["twc\(.*?\).*?\(([^)]*)\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]  ]}

3.创建可重用的组件：

导入 twc 并使用 twc.div 创建一个组件，其中 div 代表要创建的组件的标签名称。

// card.jsximport { twc } from "react-twc"; export const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;

然后，您就可以在应用程序中使用您的组件了：

import { Card } from "./card"; function App() {  return <Card>Hello world!</Card>;}