[Bug] RadixUI Tabs aren't styled as excepted
samzhangjy opened this issue · comments
Hello. I'm using VechaiUI in my personal project and when I use the RadixUI Tabs, the styles aren't complete. I mean, it has the bottom border but except that, there's no style at all. However, the tabs's functions are all functional... Here's the screen shot:
I'm using the very same code as shown in the docs:
import { Button, Icon } from '@vechaiui/react'
import { BellIcon, UserCircleIcon, ShieldCheckIcon } from '@heroicons/react/outline'
import * as Tabs from "@radix-ui/react-tabs"
const cx = require('classnames');
export default function Navbar() {
const tabs = [
{
value: "tab1",
name: "Account",
content: "Tab one content",
icon: UserCircleIcon,
},
{
value: "tab2",
name: "Notifications",
content: "Tab second content",
icon: BellIcon,
},
{
value: "tab3",
name: "Security",
content: "Tab third content",
icon: ShieldCheckIcon,
},
];
return (
<div className="flex flex-wrap w-full p-8 space-x-4">
<Tabs.Root className="flex flex-col" defaultValue="tab1">
<Tabs.List
aria-label="tabs example"
className={cx(
"flex flex-row justify-start",
"border-b border-neutral-200 dark:border-neutral-700"
)}
>
{tabs.map((tab) => (
<Tabs.Trigger
key={tab.value}
value={tab.value}
className={cx(
"px-3 py-2 -mb-px text-sm text-center whitespace-nowrap cursor-base focus:outline-none",
"text-neutral-900 bg-transparent border-b-2 border-transparent",
"hover:border-neutral-300",
"selected:border-primary-500 selected:text-primary-600",
// dark
"dark:text-neutral-100",
"dark:hover:border-neutral-600",
"dark:selected:border-primary-500"
)}
>
{tab.name}
</Tabs.Trigger>
))}
</Tabs.List>
{tabs.map((tab) => (
<Tabs.Content
key={tab.value}
value={tab.value}
className="p-4 flex-grow-1"
>
{tab.content}
</Tabs.Content>
))}
</Tabs.Root>
</div>
)
}
Thank you!
P.S.: The documentation used cx
function to concat class names, but the function itself wasn't written in the example code and / or imported from extrenal libraries. It's pretty confusing to people at first still....
@samzhangjy hmm seems like the selected
variant not work ... Can you show me tailwind.config.js
?
P.S: You can import cx
from @vechaiui/react
import { cx } from '@vechaiui/react'
hmm seems like the selected variant not work ... Can you show me tailwind.config.js?
Here it is... I just copied it from your comment in issue #22 :
module.exports = {
mode: "jit",
purge: [
"./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class", // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require("@tailwindcss/forms"),
require("@vechaiui/core"),
],
}
P.S: You can import cx from @vechaiui/react
Oh... Thank you... Didn't see that 😅
@samzhangjy ah I see... You need to configure the purge
option in your tailwind.config.js
file with all of your template paths. Because JIT mode generates your CSS on-demand by scanning your template files. I don't put it into document because each project has a different structure... If you using CRA u check it here https://tailwindcss.com/docs/guides/create-react-app#configure-tailwind-to-remove-unused-styles-in-production.
Oh... Thank you! However, after I edited tailwind.config.js
, the Tabs Line
style worked fine, but others still didn't work... 😂
My tailwind.config.js
:
module.exports = {
mode: "jit",
purge: [
"./node_modules/@vechaiui/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html",
],
darkMode: "class", // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require("@tailwindcss/forms"),
require("@vechaiui/core"),
],
}
@samzhangjy 🙀 can you reproduce to another repo that I can debug
Sure... Here it goes: https://github.com/samzhangjy/stcomix-web... The code is messy, though...
The usage of tabs should be in file /src/components/Navbar.js
.
@samzhangjy Ok I missing config in document to this component ... You need to add borderColor
= inherit
in theme option
theme: {
extend: {
borderColor: {
inherit: "inherit",
},
},
},
Thank you. However... When I tried to use the soft-rounded style, it's still unstyled... I put the wrong type of tabs in my repo... It should be the style tabs soft rounded
. Thanks!
oh shit thanks u 🙀