Shad Cnをcostumizeの件
今しているプロジェクトではShadCnとtailwind 4.0 を使ってcostumizeしたいんですが、
tailwindを使っているのにstyleのtagを使うことについて質問があります。
コード
import * as React from "react";
import { cn } from "@/lib/utils";
const Input = React.forwardRef(
({ className, type = "text", placeholder, label, maxLength, width, ...props }, ref) => {
const widthStyle = width ? { width: width } : { width: '16rem' };
return (
<div className={`relative`} style={widthStyle}>
{label && (
<div className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-muted-foreground">
{label}
</div>
)}
<input
ref={ref}
type={type}
placeholder={placeholder}
maxLength={maxLength}
className={cn(
"w-full rounded-xs bg-background h-10 border border-input px-3",
label ? "pl-9" : "pl-4",
className
)}
{...props}
/>
</div>
);
}
);
Input.displayName = "Input";
export { Input };
質問
const widthStyle = width ? { width: width } : { width: '16rem' };
<div className={`relative`} style={widthStyle}>
ここでstyleで使うのはtailwindで求める方法ではないと考えています。
それでclassNameにcnのユーティリティクラスを使って見たんですが、適用されていないです。
<div className={cn("relative", size)}>
cnを使ってない方法でも試して見たんですが、それも適用されていないです。
<div className={`relative ${width ? `w-[${width}]` : 'w-64'}`}>
※ widthの違いを見てください
求める結果
求めない結果
質問
styleのタグ使わない方法はいないでしょうか？
0
