[Bug] RadixUI Tabs aren't styled as excepted

[samzhangjy]

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....

[pepelele]

@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'

[samzhangjy]

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 😅

[pepelele]

@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.

[samzhangjy]

Oh... Thank you! However, after I edited tailwind.config.js, the Tabs Line style worked fine, but others still didn't work... 😂

[samzhangjy]

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"),
  ],
}

[pepelele]

@samzhangjy 🙀 can you reproduce to another repo that I can debug

[samzhangjy]

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.

[pepelele]

@samzhangjy Ok I missing config in document to this component ... You need to add borderColor = inherit in theme option

theme: {
  extend: {
    borderColor: {
      inherit: "inherit",
    },
  },
},

[samzhangjy]

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!

[pepelele]

I copied from document and It works fine both light & dark mode

[samzhangjy]

Ohh yes… You did fixed it… I copied the code again and it worked fine… Sorry 😅 PS: The import section of `tabs` seems to be wrong… `react-tooltip` should be replaced by `react-tabs`… Thank you! ***@***.***D77693.D60A0550] 发件人: ***@***.***> 发送时间: Sunday, July 11, 2021 8:26 PM 收件人: ***@***.***> 抄送: Sam ***@***.***>; ***@***.***> 主题: Re: [vechai/vechaiui] [Bug] RadixUI Tabs aren't styled as excepted (#27) I copied from document and It works fine both light & dark mode [Screen Shot 2021-07-11 at 19 25 47]<https://user-images.githubusercontent.com/84853682/125194987-ccd17300-e27d-11eb-848e-6fc5b0a07b89.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#27 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ANQCYENVAIDJRMO67XHTKKLTXGEXPANCNFSM5AEHKX6Q>.

[pepelele]

oh shit thanks u 🙀