Separatorコンポーネントが消えてしまう問題について
shadcn/uiのSeparatorコンポーネントの縦線で区切るセパレータが表示されない問題が発生した。
orientation="vertical"
の場合、tailwindの h-full
が当てられているため、flexの子要素に <Separator orientation="vertical" />
を配置すると高さが 0 になって消えてしまうというのが原因だった。
<div className='flex items-center'>
<div>xxxx</div>
<div className='h-4'>
<Separator orientation='vertical' />
</div>
<div>xxxx</div>
</div>
このような方法で、とりあえず表示できる。Next UIのDividerコンポーネントも同じようなことが起きる。
Front Matter CMSのカテゴリの設定
一つだけ選択するタイプのカテゴリのフィールド設定:
{
"title": "Category",
"name": "category",
"type": "categories",
"taxonomyLimit": 1,
"singleValueAsString": true
},