其他
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>;
}
大家都在看