其他
TWC：轻量级 React Tailwind 组件库，更小，更快，可重用！
相信坚持的力量！今天是坚持日更的第112天，点击关注、点赞、在看支持我
TWC 是一个轻量级库，可以在一行代码中创建 Tailwind 组件，减少代码量，加快构建速度。
主要特性
⚡️ 轻量级 - 仅 0.65kb ✨ 所有编辑器中支持自动完成 🎨 根据 props 自适应样式 ♻️ 使用 asChild属性重用类🦄 适用于所有组件 😎 兼容 React 服务器组件 🚀 一流的 tailwind-merge和cva支持
代码示例
将一个 React 组件转换为一行代码。
// Before
import * 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}
/>
));
// After
import { twc } from "react-twc";
const Card = twc.div`rounded-lg border bg-slate-100 text-white shadow-sm`;
快速上手
1.快速安装：
npm i react-twc
# or
yarn add react-twc
2.在编辑器中设置自动完成功能：
在 VSCode 中安装 Tailwind CSS IntelliSense 扩展。
在 settings.json 中增加如下配置：
{
"tailwindCSS.experimental.classRegex": [
"twc\\.[^`]+`([^`]*)`",
"twc\\(.*?\\).*?`([^)]*)",
["twc\\.[^`]+\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"],
["twc\\(.*?\\).*?\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]
}
3.创建可重用的组件：
导入 twc 并使用 twc.div 创建一个组件，其中 div 代表要创建的组件的标签名称。
// card.jsx
import { 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>;
}大家都在看