【Tailwind CSS】検索フィールドとオブジェクトの一体化
コメント
自動更新
コメントはまだありません
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
rounded=border-radiusをそれぞれで制御し，justify-centerで繋げると1つの要素のように振る舞うことができます．そのため，このdivをまとめてコンポーネント化することで自由な場所に貼り付けても分離しないようにします．
rounded-sのsは start, e は end上のコードによって下の結果が得られます．
次を参照してください．
i-tabler-zoomexport default function SearchBox() {
return (
<div className='flex justify-center'>
<input
placeholder='検索'
className='h-8 w-48 rounded-e-none rounded-s-3xl border-y border-l border-gray-700 px-3 transition-colors dark:bg-slate-800'
/>
<button
className='flex h-8 w-10 items-center justify-center rounded-e-3xl border-y border-r border-gray-700 bg-gray-700 px-2 transition-colors hover:border-gray-800 hover:bg-gray-800'
>
<span className='i-tabler-zoom size-4 bg-white transition-colors dark:bg-slate-200' />
</button>
</div>
);
}