Theme Configuration

Tabs Component Instructions

ulProps: A prop that allows you to pass custom classes to the ul tag used for rendering the tabs. You can specify classes to style the entire tab list. For example : ulProps="your-class-name"

activeTabClass: A prop that defines the class applied to the currently active tab. You can use this to highlight or style the active tab differently : activeTabClass="active"

inactiveTabClass: A prop that specifies the class for inactive tabs. This allows you to customize the appearance of tabs that are not currently selected : inactiveTabClass="your-class"

contentProps: A prop for passing additional classes to the content area of the tabs, allowing for further customization and spacing : contentProps="your-class"

otherClass: This prop lets you add any additional classes to the tab component, providing flexibility for further styling : otherClass="your-class"

spanProps: A prop specifically for the tag within each tab, enabling you to pass classes such as alignment : spanProps="align-middle"

label: A prop to define the label of a specific tab. You can use it to set the text that appears on the tab : label="Home"

icon: A prop that allows you to add an icon to a particular tab. You can pass an icon component to enhance the visual representation of the tab. For example: icon={`icon code`}

You can place show the custom Tabs code in the file located at src/components/CustomComponents/Tabs/Tab.tsx.

Example

<Tabs
  ulProps="tabs-pills"
  activeTabClass="active"
  inactiveTabClass="text-gray-500 hover:text-primary-500 dark:text-dark-500 dark:hover:text-primary-500"
  contentProps="mt-4"
  otherclass="nav-item [&.active]:bg-primary-500 [&.active]:text-primary-50"
  spanProps="align-middle"
>
 <Tab
   icon=<House className='inline-block size-4 ltr:mr-1 rtl:ml-1' />
   label=" Home"
 >
//your tab content
  </Tab>
</Tabs>

This guide covers everything you need to know to make sure Tailwind generates all of the CSS needed for your project.