diff --git a/src/config.json b/src/config.json
index 89d6d1e8c7..ab7407947b 100644
--- a/src/config.json
+++ b/src/config.json
@@ -480,7 +480,7 @@
           "v15": 2,
           "author": "oasis",
           "dd": true,
-          "v16": false
+          "v16": true
         }
       ]
     },
diff --git a/src/packages/configprovider/types.ts b/src/packages/configprovider/types.ts
index bf1e53ad89..c737c00abd 100644
--- a/src/packages/configprovider/types.ts
+++ b/src/packages/configprovider/types.ts
@@ -710,10 +710,13 @@ export type NutCSSVariables =
   | 'nutuiTabsTitlesBackgroundColor'
   | 'nutuiTabsTitlesGap'
   | 'nutuiTabsTitlesFontSize'
+  | 'nutuiTabsTitlesItemFontFamily'
+  | 'nutuiTabsTitlesItemFontWeight'
   | 'nutuiTabsTitlesItemMinWidth'
   | 'nutuiTabsTitlesItemColor'
   | 'nutuiTabsTitlesItemActiveColor'
   | 'nutuiTabsTitlesItemActiveFontWeight'
+  | 'nutuiTabsTitlesItemActiveFontFamily'
   | 'nutuiTabsTitlesItemActiveFontSize'
   | 'nutuiTabsTitlesItemActiveBackgroundColor'
   | 'nutuiTabsTabLineWidth'
@@ -723,6 +726,10 @@ export type NutCSSVariables =
   | 'nutuiTabsLineBorderRadius'
   | 'nutuiTabsTabLineOpacity'
   | 'nutuiTabsButtonBorderRadius'
+  | 'nutuiTabsButtonFontSize'
+  | 'nutuiTabsButtonActiveFontSize'
+  | 'nutuiTabsButtonActiveFontWeight'
+  | 'nutuiTabsButtonBackgroundColor'
   | 'nutuiTabsButtonActiveBackgroundColor'
   | 'nutuiTabsButtonActiveBorder'
   | 'nutuiTabsVerticalTitlesWidth'
diff --git a/src/packages/tabs/__test__/tabs.spec.tsx b/src/packages/tabs/__test__/tabs.spec.tsx
index 69a02517da..4a0d244b4b 100644
--- a/src/packages/tabs/__test__/tabs.spec.tsx
+++ b/src/packages/tabs/__test__/tabs.spec.tsx
@@ -41,6 +41,28 @@ test('base tabs props', () => {
   expect(el3).toHaveClass('nut-tabs-titles-card')
 })
 
+test('button type tabs', () => {
+  const { container } = render(
+    <Tabs value="0" activeType="button">
+      <TabPane title="Tab 1" value="0">
+        Tab 1
+      </TabPane>
+      <TabPane title="Tab 2" value="1">
+        Tab 2
+      </TabPane>
+    </Tabs>
+  )
+  const titles = container.querySelectorAll('.nut-tabs-titles')[0]
+  expect(titles).toHaveClass('nut-tabs-titles-button')
+
+  const items = container.querySelectorAll('.nut-tabs-titles-item')
+  const texts = container.querySelectorAll('.nut-tabs-titles-item-text')
+  expect(items[0]).toHaveClass('nut-tabs-titles-item-active')
+  expect(items[1]).not.toHaveClass('nut-tabs-titles-item-active')
+  expect(texts.length).toBe(2)
+  expect(texts[0]).toHaveTextContent('Tab 1')
+})
+
 test('base other props', async () => {
   const { container } = render(
     <Tabs duration={500}>
diff --git a/src/packages/tabs/demo.taro.tsx b/src/packages/tabs/demo.taro.tsx
index fc5dd95801..70fa174123 100644
--- a/src/packages/tabs/demo.taro.tsx
+++ b/src/packages/tabs/demo.taro.tsx
@@ -28,6 +28,8 @@ import Demo20 from './demos/taro/demo20'
 import Demo21 from './demos/taro/demo21'
 import Demo22 from './demos/taro/demo22'
 import Demo23 from './demos/taro/demo23'
+import Demo24 from './demos/taro/demo24'
+import Demo25 from './demos/taro/demo25'
 
 const TabsDemo = () => {
   const [translated] = useTranslate({
@@ -49,6 +51,8 @@ const TabsDemo = () => {
       title14: '滑动切换',
       title7: 'Title 字体尺寸：20px 12px',
       title8: '自定义标签栏',
+      title15: '自定义标签栏-辅助信息',
+      title16: '左对齐-辅助操作',
       title9: 'Tabpane 自动高度',
       title10: 'CSS 粘性布局',
       title11: 'Title 左对齐',
@@ -74,6 +78,8 @@ const TabsDemo = () => {
       title14: 'Slide To Switch',
       title7: 'Title FontSize: 20px 12px',
       title8: 'Custom Tab Bar',
+      title15: 'Custom Tab Bar - Auxiliary Info',
+      title16: 'Left Align - Auxiliary Operation',
       title9: 'Tabpane Auto Height',
       title10: 'CSS Sticky',
       title11: 'Title Left Align',
@@ -140,6 +146,10 @@ const TabsDemo = () => {
         <Demo22 />
         <View className="h2">{translated.title8}</View>
         <Demo23 />
+        <View className="h2">{translated.title15}</View>
+        <Demo24 />
+        <View className="h2">{translated.title16}</View>
+        <Demo25 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/tabs/demo.tsx b/src/packages/tabs/demo.tsx
index c43e4c51c2..1049710ff3 100644
--- a/src/packages/tabs/demo.tsx
+++ b/src/packages/tabs/demo.tsx
@@ -23,6 +23,8 @@ import Demo20 from './demos/h5/demo20'
 import Demo21 from './demos/h5/demo21'
 import Demo22 from './demos/h5/demo22'
 import Demo23 from './demos/h5/demo23'
+import Demo24 from './demos/h5/demo24'
+import Demo25 from './demos/h5/demo25'
 
 const TabsDemo = () => {
   const [translated] = useTranslate({
@@ -43,6 +45,8 @@ const TabsDemo = () => {
       title14: '滑动切换',
       title7: 'Title 字体尺寸：20px 12px',
       title8: '自定义标签栏',
+      title15: '自定义标签栏-辅助信息',
+      title16: '左对齐-辅助操作',
       title9: 'Tabpane 自动高度',
       title10: 'CSS 粘性布局',
       title11: 'Title 左对齐',
@@ -67,6 +71,8 @@ const TabsDemo = () => {
       title14: 'Slide To Switch',
       title7: 'Title FontSize: 20px 12px',
       title8: 'Custom Tab Bar',
+      title15: 'Custom Tab Bar - Auxiliary Info',
+      title16: 'Left Align - Auxiliary Operation',
       title9: 'Tabpane Auto Height',
       title10: 'CSS Sticky',
       title11: 'Title Left Align',
@@ -125,6 +131,10 @@ const TabsDemo = () => {
         <Demo22 />
         <h2>{translated.title8}</h2>
         <Demo23 />
+        <h2>{translated.title15}</h2>
+        <Demo24 />
+        <h2>{translated.title16}</h2>
+        <Demo25 />
       </div>
     </>
   )
diff --git a/src/packages/tabs/demos/h5/demo22.tsx b/src/packages/tabs/demos/h5/demo22.tsx
index a06e85e072..a9051bf676 100644
--- a/src/packages/tabs/demos/h5/demo22.tsx
+++ b/src/packages/tabs/demos/h5/demo22.tsx
@@ -11,7 +11,10 @@ const Demo22 = () => {
         onChange={(value) => {
           setTabvalue(value)
         }}
-        style={{ '--nutui-tabs-titles-font-size': '20px' }}
+        style={{
+          '--nutui-tabs-titles-font-size':
+            'calc(20px * var(--nut-scale-font, 1))',
+        }}
       >
         <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
@@ -22,7 +25,10 @@ const Demo22 = () => {
         onChange={(value) => {
           setTabvalue1(value)
         }}
-        style={{ '--nutui-tabs-titles-font-size': '12px' }}
+        style={{
+          '--nutui-tabs-titles-font-size':
+            'calc(12px * var(--nut-scale-font, 1))',
+        }}
       >
         <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo24.tsx b/src/packages/tabs/demos/h5/demo24.tsx
new file mode 100644
index 0000000000..86604d84fa
--- /dev/null
+++ b/src/packages/tabs/demos/h5/demo24.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import { Tabs } from '@nutui/nutui-react'
+
+const Demo24 = () => {
+  const [tabvalue, setTabvalue] = useState('c1')
+  const list = [
+    { title: '选中态标题', subtitle: '辅助信息文本', paneKey: 'c1' },
+    { title: '非选中态标题', subtitle: '辅助信息文本', paneKey: 'c2' },
+    { title: '非选中态标题', subtitle: '辅助信息文本', paneKey: 'c3' },
+    { title: '非选中态标题', subtitle: '辅助信息文本', paneKey: 'c4' },
+  ]
+  return (
+    <Tabs
+      value={tabvalue}
+      style={{
+        '--nutui-tabs-titles-height': 'calc(44px * var(--nut-scale-f, 1))',
+      }}
+      title={() => {
+        return list.map((item) => {
+          const active = tabvalue === item.paneKey
+          return (
+            <div
+              key={item.paneKey}
+              onClick={() => setTabvalue(item.paneKey)}
+              className={`nut-tabs-titles-item ${active ? 'nut-tabs-titles-item-active' : ''}`}
+              style={{
+                flexDirection: 'column',
+                justifyContent: 'center',
+                lineHeight: 'initial',
+              }}
+            >
+              <span className="nut-tabs-titles-item-text">{item.title}</span>
+              <span
+                style={{
+                  textAlign: 'center',
+                  fontSize: 'calc(11px * var(--nut-scale-font, 1))',
+                  fontWeight: '400',
+                  lineHeight: 'calc(16px * var(--nut-scale-font, 1))',
+                  color: active
+                    ? 'var(--nutui-tabs-titles-item-active-color, #ff0f23)'
+                    : 'var(--nutui-color-text, #505259)',
+                }}
+              >
+                {item.subtitle}
+              </span>
+            </div>
+          )
+        })
+      }}
+    >
+      {list.map((item) => (
+        <Tabs.TabPane key={item.paneKey} value={item.paneKey}>
+          {item.title}
+        </Tabs.TabPane>
+      ))}
+    </Tabs>
+  )
+}
+export default Demo24
diff --git a/src/packages/tabs/demos/h5/demo25.tsx b/src/packages/tabs/demos/h5/demo25.tsx
new file mode 100644
index 0000000000..6296a384bf
--- /dev/null
+++ b/src/packages/tabs/demos/h5/demo25.tsx
@@ -0,0 +1,101 @@
+import React, { useState } from 'react'
+import { Tabs } from '@nutui/nutui-react'
+import { Search } from '@nutui/icons-react'
+
+const Demo25 = () => {
+  const [tabvalue, setTabvalue] = useState('c1')
+  const list = [
+    { title: 'Tab longitem 1', paneKey: 'c1' },
+    { title: 'Tab longitem 2', paneKey: 'c2' },
+    { title: 'Tab3', paneKey: 'c3' },
+    { title: 'Tab4', paneKey: 'c4' },
+    { title: 'Tab5', paneKey: 'c5' },
+    { title: 'Tab6', paneKey: 'c6' },
+  ]
+
+  const renderTitles = () => {
+    const items = list.map((item) => {
+      const active = tabvalue === item.paneKey
+      return (
+        <div
+          key={item.paneKey}
+          onClick={() => setTabvalue(item.paneKey)}
+          className={`nut-tabs-titles-item ${active ? 'nut-tabs-titles-item-active' : ''}`}
+        >
+          <span className="nut-tabs-titles-item-text">{item.title}</span>
+          <span className="nut-tabs-titles-item-line" />
+        </div>
+      )
+    })
+    // 末尾占位:预留 >= 辅助操作宽度的空白,滚到最右端时末项文字不被辅助操作遮挡
+    items.push(
+      <div
+        className="nut-tabs-titles-item"
+        key="__aux_placeholder__"
+        aria-hidden
+        style={{ flex: 'none', minWidth: 'calc(36px * var(--nut-scale-f, 1))' }}
+      />
+    )
+    return items
+  }
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+      }}
+    >
+      <Tabs
+        value={tabvalue}
+        align="left"
+        title={renderTitles}
+        style={{
+          '--nutui-tabs-titles-background-color':
+            'var(--nutui-color-background, #f2f3f5)',
+        }}
+      >
+        {list.map((item) => (
+          <Tabs.TabPane key={item.paneKey} value={item.paneKey}>
+            {item.title}
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          display: 'flex',
+          alignItems: 'center',
+          height:
+            'var(--nutui-tabs-titles-height, calc(36px * var(--nut-scale-f, 1)))',
+        }}
+      >
+        <div
+          style={{
+            width: 'calc(16px * var(--nut-scale-f, 1))',
+            height: '100%',
+            background:
+              'linear-gradient(to left, var(--nutui-color-background, #f0f2f7) 0%, transparent 100%)',
+          }}
+        />
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            width: 'calc(36px * var(--nut-scale-f, 1))',
+            background: 'var(--nutui-color-background, #f0f2f7)',
+          }}
+        >
+          <Search
+            width="calc(18px * var(--nut-scale-icon, 1))"
+            height="calc(18px * var(--nut-scale-icon, 1))"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+export default Demo25
diff --git a/src/packages/tabs/demos/h5/demo4.tsx b/src/packages/tabs/demos/h5/demo4.tsx
index aaca44d0ea..592fe0aee7 100644
--- a/src/packages/tabs/demos/h5/demo4.tsx
+++ b/src/packages/tabs/demos/h5/demo4.tsx
@@ -7,6 +7,11 @@ const Demo4 = () => {
     <>
       <Tabs
         value={tabvalue}
+        style={{
+          '--nutui-tabs-titles-height': 'calc(40px * var(--nut-scale-f, 1))',
+          '--nutui-tabs-titles-background-color':
+            'var(--nutui-color-background, #f2f3f5)',
+        }}
         onChange={(value) => {
           setTabvalue(value)
         }}
diff --git a/src/packages/tabs/demos/h5/demo5.tsx b/src/packages/tabs/demos/h5/demo5.tsx
index 9277fcf0fd..c2eee56a22 100644
--- a/src/packages/tabs/demos/h5/demo5.tsx
+++ b/src/packages/tabs/demos/h5/demo5.tsx
@@ -11,6 +11,7 @@ const Demo5 = () => {
           setTabvalue(value)
         }}
         activeType="button"
+        style={{ fontFamily: 'PingFang SC' }}
       >
         <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
         <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/h5/demo8.tsx b/src/packages/tabs/demos/h5/demo8.tsx
index 7b28f4963c..37fba43131 100644
--- a/src/packages/tabs/demos/h5/demo8.tsx
+++ b/src/packages/tabs/demos/h5/demo8.tsx
@@ -7,6 +7,11 @@ const Demo8 = () => {
     <>
       <Tabs
         value={tabvalue}
+        style={{
+          '--nutui-tabs-titles-height': 'calc(40px * var(--nut-scale-f, 1))',
+          '--nutui-tabs-titles-background-color':
+            'var(--nutui-color-background, #f2f3f5)',
+        }}
         activeType="card"
         align="left"
         onChange={(value) => {
diff --git a/src/packages/tabs/demos/taro/demo24.tsx b/src/packages/tabs/demos/taro/demo24.tsx
new file mode 100644
index 0000000000..8bd2d14185
--- /dev/null
+++ b/src/packages/tabs/demos/taro/demo24.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { View, Text } from '@tarojs/components'
+import { Tabs, pxTransform } from '@nutui/nutui-react-taro'
+
+const Demo24 = () => {
+  const [tabvalue, setTabvalue] = useState('c1')
+  const list = [
+    { title: '选中态标题', subtitle: '辅助信息文本', paneKey: 'c1' },
+    { title: '非选中态标题', subtitle: '辅助信息文本', paneKey: 'c2' },
+    { title: '非选中态标题', subtitle: '辅助信息文本', paneKey: 'c3' },
+    { title: '非选中态标题', subtitle: '辅助信息文本', paneKey: 'c4' },
+  ]
+  return (
+    <Tabs
+      value={tabvalue}
+      style={{ '--nutui-tabs-titles-height': pxTransform(44) }}
+      title={() => {
+        return list.map((item) => {
+          const active = tabvalue === item.paneKey
+          return (
+            <View
+              key={item.paneKey}
+              onClick={() => setTabvalue(item.paneKey)}
+              className={`nut-tabs-titles-item ${active ? 'nut-tabs-titles-item-active' : ''}`}
+              style={{
+                flexDirection: 'column',
+                justifyContent: 'center',
+                lineHeight: 'initial',
+              }}
+            >
+              <Text className="nut-tabs-titles-item-text">{item.title}</Text>
+              <Text
+                style={{
+                  textAlign: 'center',
+                  fontSize: pxTransform(11),
+                  fontWeight: '400',
+                  lineHeight: pxTransform(16),
+                  color: active
+                    ? 'var(--nutui-tabs-titles-item-active-color, #ff0f23)'
+                    : 'var(--nutui-color-text, #505259)',
+                }}
+              >
+                {item.subtitle}
+              </Text>
+            </View>
+          )
+        })
+      }}
+    >
+      {list.map((item) => (
+        <Tabs.TabPane key={item.paneKey} value={item.paneKey}>
+          {item.title}
+        </Tabs.TabPane>
+      ))}
+    </Tabs>
+  )
+}
+export default Demo24
diff --git a/src/packages/tabs/demos/taro/demo25.tsx b/src/packages/tabs/demos/taro/demo25.tsx
new file mode 100644
index 0000000000..0b3286fc5d
--- /dev/null
+++ b/src/packages/tabs/demos/taro/demo25.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from 'react'
+import { View, Text } from '@tarojs/components'
+import { Tabs, pxTransform } from '@nutui/nutui-react-taro'
+import { Search } from '@nutui/icons-react-taro'
+
+const Demo25 = () => {
+  const [tabvalue, setTabvalue] = useState('c1')
+  const list = [
+    { title: 'Tab longitem 1', paneKey: 'c1' },
+    { title: 'Tab longitem 2', paneKey: 'c2' },
+    { title: 'Tab3', paneKey: 'c3' },
+    { title: 'Tab4', paneKey: 'c4' },
+    { title: 'Tab5', paneKey: 'c5' },
+    { title: 'Tab6', paneKey: 'c6' },
+  ]
+
+  const renderTitles = () => {
+    const items = list.map((item) => {
+      const active = tabvalue === item.paneKey
+      return (
+        <View
+          key={item.paneKey}
+          onClick={() => setTabvalue(item.paneKey)}
+          className={`nut-tabs-titles-item ${active ? 'nut-tabs-titles-item-active' : ''}`}
+        >
+          <Text className="nut-tabs-titles-item-text">{item.title}</Text>
+          <Text className="nut-tabs-titles-item-line" />
+        </View>
+      )
+    })
+    // 末尾占位:预留 >= 辅助操作宽度的空白,滚到最右端时末项文字不被辅助操作遮挡
+    items.push(
+      <View
+        className="nut-tabs-titles-item"
+        key="__aux_placeholder__"
+        style={{ flex: 'none', minWidth: pxTransform(36) }}
+      />
+    )
+    return items
+  }
+
+  return (
+    <View
+      style={{
+        position: 'relative',
+      }}
+    >
+      <Tabs
+        value={tabvalue}
+        align="left"
+        title={renderTitles}
+        style={{
+          '--nutui-tabs-titles-background-color':
+            'var(--nutui-color-background, #f2f3f5)',
+        }}
+      >
+        {list.map((item) => (
+          <Tabs.TabPane key={item.paneKey} value={item.paneKey}>
+            {item.title}
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+      <View
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          display: 'flex',
+          alignItems: 'center',
+          height: `var(--nutui-tabs-titles-height, ${pxTransform(36)})`,
+        }}
+      >
+        <View
+          style={{
+            width: pxTransform(16),
+            height: '100%',
+            background:
+              'linear-gradient(to left, var(--nutui-color-background, #f0f2f7) 0%, transparent 100%)',
+          }}
+        />
+        <View
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            width: pxTransform(36),
+            background: 'var(--nutui-color-background, #f0f2f7)',
+          }}
+        >
+          <Search width={pxTransform(18)} height={pxTransform(18)} />
+        </View>
+      </View>
+    </View>
+  )
+}
+export default Demo25
diff --git a/src/packages/tabs/demos/taro/demo4.tsx b/src/packages/tabs/demos/taro/demo4.tsx
index 6c1a3df1ff..72ef13827f 100644
--- a/src/packages/tabs/demos/taro/demo4.tsx
+++ b/src/packages/tabs/demos/taro/demo4.tsx
@@ -1,11 +1,16 @@
 import React, { useState } from 'react'
-import { Tabs } from '@nutui/nutui-react-taro'
+import { Tabs, pxTransform } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
   const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
       value={tabvalue}
+      style={{
+        '--nutui-tabs-titles-height': pxTransform(40),
+        '--nutui-tabs-titles-background-color':
+          'var(--nutui-color-background, #f2f3f5)',
+      }}
       onChange={(value) => {
         setTabvalue(value)
       }}
diff --git a/src/packages/tabs/demos/taro/demo5.tsx b/src/packages/tabs/demos/taro/demo5.tsx
index d116fe27d4..8b5dfed1a3 100644
--- a/src/packages/tabs/demos/taro/demo5.tsx
+++ b/src/packages/tabs/demos/taro/demo5.tsx
@@ -10,6 +10,7 @@ const Demo5 = () => {
         setTabvalue(value)
       }}
       activeType="button"
+      style={{ fontFamily: 'PingFang SC' }}
     >
       <Tabs.TabPane title="Tab longitem"> Tab longitem </Tabs.TabPane>
       <Tabs.TabPane title="Tab 2"> Tab 2 </Tabs.TabPane>
diff --git a/src/packages/tabs/demos/taro/demo8.tsx b/src/packages/tabs/demos/taro/demo8.tsx
index 580f732675..2cafbfb418 100644
--- a/src/packages/tabs/demos/taro/demo8.tsx
+++ b/src/packages/tabs/demos/taro/demo8.tsx
@@ -1,11 +1,16 @@
 import React, { useState } from 'react'
-import { Tabs } from '@nutui/nutui-react-taro'
+import { Tabs, pxTransform } from '@nutui/nutui-react-taro'
 
 const Demo8 = () => {
   const [tabvalue, setTabvalue] = useState<string | number>('0')
   return (
     <Tabs
       value={tabvalue}
+      style={{
+        '--nutui-tabs-titles-height': pxTransform(40),
+        '--nutui-tabs-titles-background-color':
+          'var(--nutui-color-background, #f2f3f5)',
+      }}
       activeType="card"
       onChange={(value) => {
         setTabvalue(value)
diff --git a/src/packages/tabs/doc.en-US.md b/src/packages/tabs/doc.en-US.md
index adb3fe22ae..d07f50526e 100644
--- a/src/packages/tabs/doc.en-US.md
+++ b/src/packages/tabs/doc.en-US.md
@@ -200,6 +200,22 @@ When autoHeight is set to true, nut-tabs and nut-tabs\_\_content will change wit
 
 :::
 
+### Custom Tab Bar - Auxiliary Info
+
+:::demo
+
+<CodeBlock src='h5/demo24.tsx'></CodeBlock>
+
+:::
+
+### Left Align - Auxiliary Operation
+
+:::demo
+
+<CodeBlock src='h5/demo25.tsx'></CodeBlock>
+
+:::
+
 ## Tabs
 
 ### Props
@@ -237,22 +253,30 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-tabs-titles-height | height of titles in horizontal direction | `44px` |
-| \--nutui-tabs-titles-background-color | Tab title background color | `$color-background` |
-| \--nutui-tabs-title-gap | Tab title margin | `0px` |
-| \--nutui-tabs-titles-font-size | Tab title font size | `$font-size-base` |
+| \--nutui-tabs-titles-height | height of titles in horizontal direction | `36px` |
+| \--nutui-tabs-titles-background-color | Tab title background color | `$color-background-overlay` |
+| \--nutui-tabs-titles-gap | Tab title margin | `8px` |
+| \--nutui-tabs-titles-font-size | Tab title font size | `$font-size-md` |
+| \--nutui-tabs-titles-item-font-family | Tab title font family | `PingFangSC-Semibold` |
+| \--nutui-tabs-titles-item-font-weight | Tab title font weight | `$font-weight-bold` |
 | \--nutui-tabs-titles-item-min-width | Minimum width of horizontal titles | `50px` |
 | \--nutui-tabs-titles-item-color | Tab titles font color | `$color-title` |
 | \--nutui-tabs-titles-item-active-color | Tab selected titles font color | `$color-primary` |
 | \--nutui-tabs-titles-item-active-font-weight | Tab selected titles font weight | `$font-weight-bold` |
-| \--nutui-tabs-titles-item-active-font-size | Tab selected titles font size | `$font-size-l` |
+| \--nutui-tabs-titles-item-active-font-family | Tab selected titles font family | `PingFangSC-Semibold` |
+| \--nutui-tabs-titles-item-active-font-size | Tab selected titles font size | `$font-size-md` |
 | \--nutui-tabs-titles-item-active-background-color | Background color of active tab titles in horizontal direction | `$color-background-overlay` |
-| \--nutui-tabs-tab-line-width | Horizontal active tab line width | `12px` |
+| \--nutui-tabs-tab-line-width | Horizontal active tab line width | `16px` |
 | \--nutui-tabs-tab-line-height | Height of active tabs line in horizontal direction | `2px` |
 | \--nutui-tabs-tab-line-color | Horizontal line color | `$color-primary` |
 | \--nutui-tabs-line-bottom | Horizontal line distance | `15%` |
 | \--nutui-tabs-line-border-radius | rounded corners for horizontal lines | `2px` |
 | \--nutui-tabs-tab-line-opacity | Opacity of horizontal tabs | `1` |
+| \--nutui-tabs-button-border-radius | Border radius of button-type tabs | `6px` |
+| \--nutui-tabs-button-font-size | Font size of unselected button-type title | `$font-size-base` |
+| \--nutui-tabs-button-active-font-size | Font size of selected button-type title | `$font-size-base` |
+| \--nutui-tabs-button-active-font-weight | Font weight of selected button-type title | `$font-weight-bold` |
+| \--nutui-tabs-button-background-color | Background color of unselected button-type title | `var(--nutui-color-background-component)` |
 | \--nutui-tabs-vertical-titles-width | Width of vertical titles | `100px` |
 | \--nutui-tabs-vertical-titles-item-height | height of vertical titles | `40px` |
 | \--nutui-tabs-vertical-tab-line-color | vertical line color | `linear-gradient(180deg, $color-primary 0%, rgba(#fa2c19, 0.15) 100%)` |
diff --git a/src/packages/tabs/doc.md b/src/packages/tabs/doc.md
index 53448f5b56..961d6d41bb 100644
--- a/src/packages/tabs/doc.md
+++ b/src/packages/tabs/doc.md
@@ -200,6 +200,22 @@ import { Tabs } from '@nutui/nutui-react'
 
 :::
 
+### 自定义标签栏-辅助信息
+
+:::demo
+
+<CodeBlock src='h5/demo24.tsx'></CodeBlock>
+
+:::
+
+### 左对齐-辅助操作
+
+:::demo
+
+<CodeBlock src='h5/demo25.tsx'></CodeBlock>
+
+:::
+
 ## Tabs
 
 ### Props
@@ -237,22 +253,30 @@ import { Tabs } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-tabs-titles-height | 水平方向标题的高度 | `44px` |
-| \--nutui-tabs-titles-background-color | Tab 标题的背景色 | `$color-background` |
-| \--nutui-tabs-title-gap | Tab 标题的左右 margin | `0px` |
-| \--nutui-tabs-titles-font-size | Tab 标题的字号 | `$font-size-base` |
+| \--nutui-tabs-titles-height | 水平方向标题的高度 | `36px` |
+| \--nutui-tabs-titles-background-color | Tab 标题的背景色 | `$color-background-overlay` |
+| \--nutui-tabs-titles-gap | Tab 标题的左右 margin | `8px` |
+| \--nutui-tabs-titles-font-size | Tab 标题的字号 | `$font-size-md` |
+| \--nutui-tabs-titles-item-font-family | Tab 标题的字体 | `PingFangSC-Semibold` |
+| \--nutui-tabs-titles-item-font-weight | Tab 标题的字重 | `$font-weight-bold` |
 | \--nutui-tabs-titles-item-min-width | 水平方向标题的最小宽度 | `50px` |
 | \--nutui-tabs-titles-item-color | Tab 标题的字色 | `$color-title` |
 | \--nutui-tabs-titles-item-active-color | Tab 选中标题的字色 | `$color-primary` |
 | \--nutui-tabs-titles-item-active-font-weight | Tab 选中标题的字重 | `$font-weight-bold` |
-| \--nutui-tabs-titles-item-active-font-size | Tab 选中标题的字号 | `$font-size-l` |
+| \--nutui-tabs-titles-item-active-font-family | Tab 选中标题的字体 | `PingFangSC-Semibold` |
+| \--nutui-tabs-titles-item-active-font-size | Tab 选中标题的字号 | `$font-size-md` |
 | \--nutui-tabs-titles-item-active-background-color | 水平方向激活选项卡标题的背景色 | `$color-background-overlay` |
-| \--nutui-tabs-tab-line-width | 水平方向激活选项卡线条的宽度 | `12px` |
+| \--nutui-tabs-tab-line-width | 水平方向激活选项卡线条的宽度 | `16px` |
 | \--nutui-tabs-tab-line-height | 水平方向激活选项卡线条的高度 | `2px` |
 | \--nutui-tabs-tab-line-color | 水平方向线条颜色 | `$color-primary` |
 | \--nutui-tabs-line-bottom | 水平方向线条距离 | `15%` |
 | \--nutui-tabs-line-border-radius | 水平方向线的圆角 | `2px` |
 | \--nutui-tabs-tab-line-opacity | 水平方向线的透明度 | `1` |
+| \--nutui-tabs-button-border-radius | 按钮模式选项卡的圆角 | `6px` |
+| \--nutui-tabs-button-font-size | 按钮模式未选中标题的字号 | `$font-size-base` |
+| \--nutui-tabs-button-active-font-size | 按钮模式选中标题的字号 | `$font-size-base` |
+| \--nutui-tabs-button-active-font-weight | 按钮模式选中标题的字重 | `$font-weight-bold` |
+| \--nutui-tabs-button-background-color | 按钮模式未选中标题的背景色 | `var(--nutui-color-background-component)` |
 | \--nutui-tabs-vertical-titles-width | 垂直方向标题的宽度 | `100px` |
 | \--nutui-tabs-vertical-titles-item-height | 垂直方向标题的高度 | `40px` |
 | \--nutui-tabs-vertical-tab-line-color | 垂直方向线条颜色 | `linear-gradient(180deg, $color-primary 0%, rgba(#FF0F23, 0.15) 100%)` |
diff --git a/src/packages/tabs/doc.taro.md b/src/packages/tabs/doc.taro.md
index 789ca19516..a81997546c 100644
--- a/src/packages/tabs/doc.taro.md
+++ b/src/packages/tabs/doc.taro.md
@@ -198,6 +198,22 @@ import { Tabs } from '@nutui/nutui-react-taro'
 
 :::
 
+### 自定义标签栏-辅助信息
+
+:::demo
+
+<CodeBlock src='taro/demo24.tsx'></CodeBlock>
+
+:::
+
+### 左对齐-辅助操作
+
+:::demo
+
+<CodeBlock src='taro/demo25.tsx'></CodeBlock>
+
+:::
+
 ## Tabs
 
 ### Props
@@ -235,22 +251,30 @@ import { Tabs } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-tabs-titles-height | 水平方向标题的高度 | `44px` |
-| \--nutui-tabs-titles-background-color | Tab 标题的背景色 | `$color-background` |
-| \--nutui-tabs-title-gap | Tab 标题的左右 margin | `0px` |
-| \--nutui-tabs-titles-font-size | Tab 标题的字号 | `$font-size-base` |
+| \--nutui-tabs-titles-height | 水平方向标题的高度 | `36px` |
+| \--nutui-tabs-titles-background-color | Tab 标题的背景色 | `$color-background-overlay` |
+| \--nutui-tabs-titles-gap | Tab 标题的左右 margin | `8px` |
+| \--nutui-tabs-titles-font-size | Tab 标题的字号 | `$font-size-md` |
+| \--nutui-tabs-titles-item-font-family | Tab 标题的字体 | `PingFangSC-Semibold` |
+| \--nutui-tabs-titles-item-font-weight | Tab 标题的字重 | `$font-weight-bold` |
 | \--nutui-tabs-titles-item-min-width | 水平方向标题的最小宽度 | `50px` |
 | \--nutui-tabs-titles-item-color | Tab 标题的字色 | `$color-title` |
 | \--nutui-tabs-titles-item-active-color | Tab 选中标题的字色 | `$color-primary` |
 | \--nutui-tabs-titles-item-active-font-weight | Tab 选中标题的字重 | `$font-weight-bold` |
-| \--nutui-tabs-titles-item-active-font-size | Tab 选中标题的字号 | `$font-size-l` |
+| \--nutui-tabs-titles-item-active-font-family | Tab 选中标题的字体 | `PingFangSC-Semibold` |
+| \--nutui-tabs-titles-item-active-font-size | Tab 选中标题的字号 | `$font-size-md` |
 | \--nutui-tabs-titles-item-active-background-color | 水平方向激活选项卡标题的背景色 | `$color-background-overlay` |
-| \--nutui-tabs-tab-line-width | 水平方向激活选项卡线条的宽度 | `12px` |
+| \--nutui-tabs-tab-line-width | 水平方向激活选项卡线条的宽度 | `16px` |
 | \--nutui-tabs-tab-line-height | 水平方向激活选项卡线条的高度 | `2px` |
 | \--nutui-tabs-tab-line-color | 水平方向线条颜色 | `$color-primary` |
 | \--nutui-tabs-line-bottom | 水平方向线条距离 | `15%` |
 | \--nutui-tabs-line-border-radius | 水平方向线的圆角 | `2px` |
 | \--nutui-tabs-tab-line-opacity | 水平方向线的透明度 | `1` |
+| \--nutui-tabs-button-border-radius | 按钮模式选项卡的圆角 | `6px` |
+| \--nutui-tabs-button-font-size | 按钮模式未选中标题的字号 | `$font-size-base` |
+| \--nutui-tabs-button-active-font-size | 按钮模式选中标题的字号 | `$font-size-base` |
+| \--nutui-tabs-button-active-font-weight | 按钮模式选中标题的字重 | `$font-weight-bold` |
+| \--nutui-tabs-button-background-color | 按钮模式未选中标题的背景色 | `var(--nutui-color-background-component)` |
 | \--nutui-tabs-vertical-titles-width | 垂直方向标题的宽度 | `100px` |
 | \--nutui-tabs-vertical-titles-item-height | 垂直方向标题的高度 | `40px` |
 | \--nutui-tabs-vertical-tab-line-color | 垂直方向线条颜色 | `linear-gradient(180deg, $color-primary 0%, rgba(#FF0F23, 0.15) 100%)` |
diff --git a/src/packages/tabs/doc.zh-TW.md b/src/packages/tabs/doc.zh-TW.md
index a9a0d4cd6b..88753dcf4b 100644
--- a/src/packages/tabs/doc.zh-TW.md
+++ b/src/packages/tabs/doc.zh-TW.md
@@ -198,6 +198,22 @@ import { Tabs } from '@nutui/nutui-react'
 
 :::
 
+### 自定義標簽欄-輔助信息
+
+:::demo
+
+<CodeBlock src='h5/demo24.tsx'></CodeBlock>
+
+:::
+
+### 左對齊-輔助操作
+
+:::demo
+
+<CodeBlock src='h5/demo25.tsx'></CodeBlock>
+
+:::
+
 ## Tabs
 
 ### Props
@@ -235,22 +251,30 @@ import { Tabs } from '@nutui/nutui-react'
 
 | 名稱 | 說明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-tabs-titles-height | 水平方向標題的高度 | `44px` |
-| \--nutui-tabs-titles-background-color | Tab 標題的背景色 | `$color-background` |
-| \--nutui-tabs-title-gap | Tab 標題的左右 margin | `0px` |
-| \--nutui-tabs-titles-font-size | Tab 標題的字號 | `$font-size-base` |
+| \--nutui-tabs-titles-height | 水平方向標題的高度 | `36px` |
+| \--nutui-tabs-titles-background-color | Tab 標題的背景色 | `$color-background-overlay` |
+| \--nutui-tabs-titles-gap | Tab 標題的左右 margin | `8px` |
+| \--nutui-tabs-titles-font-size | Tab 標題的字號 | `$font-size-md` |
+| \--nutui-tabs-titles-item-font-family | Tab 標題的字體 | `PingFangSC-Semibold` |
+| \--nutui-tabs-titles-item-font-weight | Tab 標題的字重 | `$font-weight-bold` |
 | \--nutui-tabs-titles-item-min-width | 水平方向標題的最小寬度 | `50px` |
 | \--nutui-tabs-titles-item-color | Tab 標題的字色 | `$color-title` |
 | \--nutui-tabs-titles-item-active-color | Tab 選中標題的字色 | `$color-primary` |
 | \--nutui-tabs-titles-item-active-font-weight | Tab 選中標題的字重 | `$font-weight-bold` |
-| \--nutui-tabs-titles-item-active-font-size | Tab 選中標題的字號 | `$font-size-l` |
+| \--nutui-tabs-titles-item-active-font-family | Tab 選中標題的字體 | `PingFangSC-Semibold` |
+| \--nutui-tabs-titles-item-active-font-size | Tab 選中標題的字號 | `$font-size-md` |
 | \--nutui-tabs-titles-item-active-background-color | 水平方向激活選項卡標題的背景色 | `$color-background-overlay` |
-| \--nutui-tabs-tab-line-width | 水平方向激活選項卡線條的寬度 | `12px` |
+| \--nutui-tabs-tab-line-width | 水平方向激活選項卡線條的寬度 | `16px` |
 | \--nutui-tabs-tab-line-height | 水平方向激活選項卡線條的高度 | `2px` |
 | \--nutui-tabs-tab-line-color | 水平方向線條顏色 | `$color-primary` |
 | \--nutui-tabs-line-bottom | 水平方向線條距離 | `15%` |
 | \--nutui-tabs-line-border-radius | 水平方向線的圓角 | `2px` |
 | \--nutui-tabs-tab-line-opacity | 水平方向線的透明度 | `1` |
+| \--nutui-tabs-button-border-radius | 按鈕模式選項卡的圓角 | `6px` |
+| \--nutui-tabs-button-font-size | 按鈕模式未選中標題的字號 | `$font-size-base` |
+| \--nutui-tabs-button-active-font-size | 按鈕模式選中標題的字號 | `$font-size-base` |
+| \--nutui-tabs-button-active-font-weight | 按鈕模式選中標題的字重 | `$font-weight-bold` |
+| \--nutui-tabs-button-background-color | 按鈕模式未選中標題的背景色 | `var(--nutui-color-background-component)` |
 | \--nutui-tabs-vertical-titles-width | 垂直方向標題的寬度 | `100px` |
 | \--nutui-tabs-vertical-titles-item-height | 垂直方向標題的高度 | `40px` |
 | \--nutui-tabs-vertical-tab-line-color | 垂直方向線條顏色 | `linear-gradient(180deg, $color-primary 0%, rgba(#FF0F23, 0.15) 100%)` |
diff --git a/src/packages/tabs/tabs.scss b/src/packages/tabs/tabs.scss
index a98beb4e36..ac8e247665 100644
--- a/src/packages/tabs/tabs.scss
+++ b/src/packages/tabs/tabs.scss
@@ -34,14 +34,18 @@
   &-left {
     justify-content: flex-start;
     .nut-tabs-titles-item {
-      padding: 0 22px;
+      padding: 0 8px;
     }
   }
 
   &-right {
     justify-content: flex-end;
     .nut-tabs-titles-item {
-      padding: 0 22px;
+      padding: 0 8px;
+    }
+
+    .nut-tabs-list {
+      justify-content: flex-end;
     }
   }
 
@@ -56,6 +60,8 @@
     line-height: $tabs-titles-height;
     min-width: $tabs-titles-item-min-width;
     font-size: $tabs-titles-font-size;
+    font-family: $tabs-titles-item-font-family;
+    font-weight: $tabs-titles-item-font-weight;
     color: $tabs-titles-item-color;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -111,6 +117,8 @@
 
       .nut-tabs-titles-item-text {
         color: $tabs-titles-item-active-color;
+        font-family: $tabs-titles-item-active-font-family;
+        font-size: $tabs-titles-item-active-font-size;
         font-weight: $tabs-titles-item-active-font-weight;
       }
 
@@ -153,7 +161,7 @@
       &-active {
         .nut-tabs-titles-item-text,
         .nut-icon {
-          color: $color-title;
+          color: $tabs-titles-item-active-color;
           font-size: $tabs-titles-item-active-font-size;
         }
       }
@@ -162,17 +170,86 @@
 
   &-card {
     .nut-tabs-titles-item {
+      padding: 0 8px;
+      flex-direction: column;
+      justify-content: center;
+      line-height: initial;
+      background: transparent;
+
       &-active {
+        position: relative;
+        z-index: 1;
+        margin: 0 24px;
         font-weight: $font-weight-bold;
-        background-color: $white;
-        border-radius: $radius-base $radius-base 0 0;
+        background-color: $tabs-titles-item-active-background-color;
+
+        &::before,
+        &::after {
+          position: absolute;
+          bottom: 0;
+          width: 24px;
+          height: 100%;
+          content: '';
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+        }
+
+        &::before {
+          left: -24px;
+          background-image: url("data:image/svg+xml,%3Csvg fill='none' height='40' version='1.1' viewBox='0 0 24 40' width='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg transform='matrix(-1,0,0,1,48,0)'%3E%3Cpath d='M0 0L1.5213693 0C5.2987967 0 8.5614691 2.6422062 9.3466406 6.3371301L15.15336 33.662868C15.938531 37.357792 19.201202 40 22.97863 40L24 40L22.98 40L0 40L0 0Z' fill='%23ffffff' transform='translate(24, 0)'/%3E%3C/g%3E%3C/svg%3E");
+        }
+
+        &::after {
+          right: -24px;
+          background-image: url("data:image/svg+xml,%3Csvg fill='none' height='40' version='1.1' viewBox='0 0 24 40' width='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M0 0L1.5213693 0C5.2987967 0 8.5614691 2.6422062 9.3466406 6.3371301L15.15336 33.662868C15.938531 37.357792 19.201202 40 22.97863 40L24 40L22.98 40L0 40L0 0Z' fill='%23ffffff'/%3E%3C/svg%3E");
+        }
+
+        &:first-child {
+          margin-left: 0;
+
+          &::before {
+            display: none;
+          }
+        }
+
+        &:last-child {
+          margin-right: 0;
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  &-card.nut-tabs-titles-not-scrollable {
+    &:not(.nut-tabs-titles-right) .nut-tabs-titles-item-active {
+      // LTR 左对齐(及 RTL 左对齐类):末项一侧恢复肩部与间距
+      &:last-child {
+        margin-right: 24px;
+
+        &::after {
+          display: block;
+        }
+      }
+    }
+
+    &.nut-tabs-titles-right .nut-tabs-titles-item-active {
+      // LTR 右对齐(及 RTL 右对齐类):首项一侧恢复肩部与间距
+      &:first-child {
+        margin-left: 24px;
+
+        &::before {
+          display: block;
+        }
       }
     }
   }
 
   &-button {
     .nut-tabs-titles-item {
-      padding: 0 10px;
+      padding: 0 4px;
       .nut-tabs-titles-item-text {
         flex: 1;
         height: 28px;
@@ -180,16 +257,20 @@
         align-items: center;
         justify-content: center;
         padding: 0 8px;
+        background: $tabs-tab-button-background-color;
+        border-radius: $tabs-tab-button-border-radius;
+        font-size: $tabs-tab-button-font-size;
+        font-weight: $font-weight;
+        color: $color-text;
       }
     }
     .nut-tabs-titles-item-active {
       .nut-tabs-titles-item-text {
-        background: $color-default-light;
         color: $tabs-titles-item-active-color;
-        border-radius: $tabs-tab-button-border-radius;
-        font-weight: $font-weight-bold;
+        font-size: $tabs-tab-button-active-font-size;
+        font-weight: $tabs-tab-button-active-font-weight;
         background-color: $tabs-tab-button-active-background-color;
-        border: $tabs-tab-button-active-border;
+        box-shadow: $tabs-tab-button-active-border;
       }
     }
   }
@@ -220,6 +301,41 @@
   }
 }
 
+// 标题栏边缘留白:该端 item 外侧 padding 翻倍,使边缘留白 = 相邻 tab 间距
+// 均分补首尾两端,左对齐仅补左端,右对齐仅补右端;水平方向生效
+.nut-tabs-horizontal {
+  .nut-tabs-titles:not(.nut-tabs-titles-right)
+    .nut-tabs-titles-item:first-child {
+    padding-left: calc(#{$tabs-titles-gap} * 2);
+  }
+
+  .nut-tabs-titles:not(.nut-tabs-titles-left) .nut-tabs-titles-item:last-child {
+    padding-right: calc(#{$tabs-titles-gap} * 2);
+  }
+
+  .nut-tabs-titles-button {
+    &:not(.nut-tabs-titles-right) .nut-tabs-titles-item:first-child {
+      padding-left: 8px;
+    }
+
+    &:not(.nut-tabs-titles-left) .nut-tabs-titles-item:last-child {
+      padding-right: 8px;
+    }
+  }
+}
+
+.nut-theme-dark {
+  .nut-tabs-titles-card .nut-tabs-titles-item-active {
+    &::before {
+      background-image: url("data:image/svg+xml,%3Csvg fill='none' height='40' version='1.1' viewBox='0 0 24 40' width='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg transform='matrix(-1,0,0,1,48,0)'%3E%3Cpath d='M0 0L1.5213693 0C5.2987967 0 8.5614691 2.6422062 9.3466406 6.3371301L15.15336 33.662868C15.938531 37.357792 19.201202 40 22.97863 40L24 40L22.98 40L0 40L0 0Z' fill='%231f2226' transform='translate(24, 0)'/%3E%3C/g%3E%3C/svg%3E");
+    }
+
+    &::after {
+      background-image: url("data:image/svg+xml,%3Csvg fill='none' height='40' version='1.1' viewBox='0 0 24 40' width='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M0 0L1.5213693 0C5.2987967 0 8.5614691 2.6422062 9.3466406 6.3371301L15.15336 33.662868C15.938531 37.357792 19.201202 40 22.97863 40L24 40L22.98 40L0 40L0 0Z' fill='%231f2226'/%3E%3C/svg%3E");
+    }
+  }
+}
+
 .nut-tabs-vertical {
   .nut-tabs-ellipsis {
     white-space: break-spaces;
@@ -265,7 +381,7 @@
     &-active {
       background-color: $tabs-titles-item-active-background-color;
       .nut-tabs-titles-item-line {
-        left: 10px;
+        left: 8px;
         width: $tabs-vertical-tab-line-width;
         height: $tabs-vertical-tab-line-height;
         background: $tabs-vertical-tab-line-color;
@@ -360,6 +476,70 @@
   }
 }
 
+// RTL 边缘留白镜像:视觉左端=物理右侧、视觉右端=物理左侧,翻转补端方向
+[dir='rtl'] .nut-tabs-horizontal,
+.nut-rtl .nut-tabs-horizontal {
+  .nut-tabs-titles:not(.nut-tabs-titles-right)
+    .nut-tabs-titles-item:first-child {
+    padding-left: $tabs-titles-gap;
+    padding-right: calc(#{$tabs-titles-gap} * 2);
+  }
+
+  .nut-tabs-titles:not(.nut-tabs-titles-left) .nut-tabs-titles-item:last-child {
+    padding-right: $tabs-titles-gap;
+    padding-left: calc(#{$tabs-titles-gap} * 2);
+  }
+
+  .nut-tabs-titles-button {
+    &:not(.nut-tabs-titles-right) .nut-tabs-titles-item:first-child {
+      padding-left: 4px;
+      padding-right: 8px;
+    }
+
+    &:not(.nut-tabs-titles-left) .nut-tabs-titles-item:last-child {
+      padding-right: 4px;
+      padding-left: 8px;
+    }
+  }
+}
+
+// RTL 卡片模式留白端镜像:对齐类(flex-start/flex-end)随书写方向翻转视觉端,
+// 贴边端/留白端与 DOM 首末项的对应关系同 LTR 相反,贴边侧直角、留白侧恢复肩部需按物理边重写
+[dir='rtl'] .nut-tabs-titles-card.nut-tabs-titles-not-scrollable,
+.nut-rtl .nut-tabs-titles-card.nut-tabs-titles-not-scrollable {
+  // RTL 左对齐类:内容贴视觉右端,首项贴边(直角在物理右侧)、末项邻留白
+  &:not(.nut-tabs-titles-right) .nut-tabs-titles-item-active {
+    &:first-child {
+      margin-left: 24px;
+      margin-right: 0;
+
+      &::before {
+        display: block;
+      }
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  // RTL 右对齐类:内容贴视觉左端,末项贴边(直角在物理左侧)、首项邻留白
+  &.nut-tabs-titles-right .nut-tabs-titles-item-active {
+    &:last-child {
+      margin-left: 0;
+      margin-right: 24px;
+
+      &::before {
+        display: none;
+      }
+
+      &::after {
+        display: block;
+      }
+    }
+  }
+}
+
 [dir='rtl'] .nut-tabs-vertical,
 .nut-rtl .nut-tabs-vertical {
   .nut-tabs-titles {
diff --git a/src/packages/tabs/tabs.taro.tsx b/src/packages/tabs/tabs.taro.tsx
index 296991282a..ecd41f6cda 100644
--- a/src/packages/tabs/tabs.taro.tsx
+++ b/src/packages/tabs/tabs.taro.tsx
@@ -1,4 +1,10 @@
-import React, { FunctionComponent, useEffect, useRef, useState } from 'react'
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
 import { ScrollView, View } from '@tarojs/components'
 import classNames from 'classnames'
 import { JoySmile } from '@nutui/icons-react-taro'
@@ -58,6 +64,10 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
 
   const titleItemsRef = useRef<HTMLDivElement[]>([])
 
+  // 卡片模式下,标题栏可横向滑动时激活卡片贴合两端边缘;不可滑动时(全部 tab 放得下)
+  // 贴边端直角、留白端恢复双肩
+  const [isScrollable, setIsScrollable] = useState(!align)
+
   const getTitles = () => {
     const titles: TabsTitle[] = []
     React.Children.forEach(children, (child, idx) => {
@@ -99,10 +109,12 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
   )
   const classesTitle = classNames(`${classPrefix}-titles`, {
     [`${classPrefix}-titles-${activeType}`]: activeType,
+    [`${classPrefix}-titles-not-scrollable`]:
+      activeType === 'card' && !isScrollable,
     [`${classPrefix}-titles-${align}`]: align,
   })
 
-  const getRect = (selector: string) => {
+  const getRect = useCallback((selector: string) => {
     return new Promise((resolve) => {
       const query = createSelectorQuery()
       const scope = tabsRef.current?._scope
@@ -114,8 +126,8 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
           resolve(rect[0])
         })
     })
-  }
-  const getAllRect = (selector: string) => {
+  }, [])
+  const getAllRect = useCallback((selector: string) => {
     return new Promise((resolve) => {
       const query = createSelectorQuery()
       const scope = tabsRef.current?._scope
@@ -127,7 +139,7 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
           resolve(rect[0])
         })
     })
-  }
+  }, [])
   type RectItem = {
     bottom: number
     dataset: { sid: string }
@@ -138,6 +150,28 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
     top: number
     width: number
   }
+  const measureScrollable = useCallback(() => {
+    if (activeType !== 'card' || direction !== 'horizontal' || !align) return
+    raf(() => {
+      Promise.all([
+        getRect(`#nut-tabs-titles-${name || uuid}`),
+        getAllRect(`#nut-tabs-titles-${name || uuid} .nut-tabs-titles-item`),
+      ]).then(([navRect, itemRects]: any) => {
+        if (!navRect || !itemRects || !itemRects.length) return
+        const totalWidth = itemRects.reduce(
+          (sum: number, curr: RectItem) => sum + curr.width,
+          0
+        )
+        // 卡片模式 active 卡片 margin 不在 boundingClientRect 内,按最大 48px 预留,
+        // 与 scrollIntoView 的钳制口径一致,避免临界内容误判为放得下
+        setIsScrollable(totalWidth + 48 - navRect.width > 1)
+      })
+    })
+  }, [activeType, direction, name, uuid, getRect, getAllRect, align])
+  // 标题/内容变化后重新布局再测;挂载后首帧由默认 false 呈现对称样式,测量完异步翻转
+  useEffect(() => {
+    measureScrollable()
+  }, [measureScrollable, children])
   const scrollWithAnimation = useRef(false)
   const [scrollLeft, setScrollLeft] = useState(0)
   const [scrollTop, setScrollTop] = useState(0)
@@ -180,9 +214,13 @@ export const Tabs: FunctionComponent<Partial<TaroTabsProps>> & {
           const left = titleRects
             .slice(0, index)
             .reduce((prev: number, curr: RectItem) => prev + curr.width, 0)
+          // 卡片模式 active 卡片带 margin: 0 24px(贴边侧为 0),boundingClientRect 不含 margin,
+          // 矩形宽求和会少算,钳制点偏短导致滚动到末尾时末项卡片显示不全;
+          // 按最大 48px 预留,超设部分由 ScrollView 自动截断到真实最大滚动距离
+          const marginExtra = activeType === 'card' ? 48 : 0
           to = Math.min(
             Math.max(0, left - (navRect.width - titleRect.width) / 2),
-            totalWidth - navRect.width
+            totalWidth + marginExtra - navRect.width
           )
         }
 
diff --git a/src/packages/tabs/tabs.tsx b/src/packages/tabs/tabs.tsx
index 142bb510f7..7ea9523cc6 100644
--- a/src/packages/tabs/tabs.tsx
+++ b/src/packages/tabs/tabs.tsx
@@ -1,4 +1,11 @@
-import React, { FunctionComponent, useEffect, useRef } from 'react'
+import React, {
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 import classNames from 'classnames'
 import { JoySmile } from '@nutui/icons-react'
 import { ComponentDefaults } from '@/utils/typings'
@@ -49,9 +56,33 @@ export const Tabs: FunctionComponent<Partial<WebTabsProps>> & {
     onChange,
   })
 
-  const titleItemsRef = useRef<HTMLDivElement[]>([])
   const navRef = useRef<HTMLDivElement>(null)
 
+  // 卡片模式下,标题栏可横向滑动时激活卡片贴合两端边缘;不可滑动时(全部 tab 放得下)
+  // 贴边端直角、留白端恢复双肩,依赖该标记切换样式
+  const [isScrollable, setIsScrollable] = useState(!align)
+  const measureScrollable = useCallback(() => {
+    if (activeType !== 'card' || direction !== 'horizontal' || !align) return
+    const nav = navRef.current
+    if (!nav) return
+    setIsScrollable(nav.scrollWidth - nav.clientWidth > 1)
+  }, [activeType, direction, align])
+
+  // 挂载后立即测量,避免首帧样式闪变
+  useLayoutEffect(() => {
+    measureScrollable()
+  }, [measureScrollable])
+
+  // 标题/内容变化后重新布局,再测一次;窗口尺寸变化时也重测
+  useEffect(() => {
+    raf(measureScrollable)
+  }, [children, measureScrollable])
+  useEffect(() => {
+    const onResize = () => raf(measureScrollable)
+    window.addEventListener('resize', onResize)
+    return () => window.removeEventListener('resize', onResize)
+  }, [measureScrollable])
+
   const scrollDirection = (
     nav: HTMLDivElement,
     to: number,
@@ -71,13 +102,16 @@ export const Tabs: FunctionComponent<Partial<WebTabsProps>> & {
 
   const scrollIntoView = (index: number, immediate?: boolean) => {
     const nav = navRef.current
-    const titleItem = titleItemsRef.current
-    const titlesLength = titles.current.length
-    const itemLength = titleItem.length
-    if (!nav || !titleItem || !titleItem[itemLength - titlesLength + index]) {
+    if (!nav) {
+      return
+    }
+    const titleItems = nav.querySelectorAll<HTMLElement>(
+      `.${classPrefix}-titles-item`
+    )
+    const title = titleItems[index]
+    if (!title) {
       return
     }
-    const title = titleItem[itemLength - titlesLength + index]
     let to = 0
     if (direction === 'vertical') {
       const runTop = title.offsetTop - nav.offsetTop + 10
@@ -129,6 +163,8 @@ export const Tabs: FunctionComponent<Partial<WebTabsProps>> & {
   const classesTitle = classNames(`${classPrefix}-titles`, {
     [`${classPrefix}-titles-${activeType}`]: activeType,
     [`${classPrefix}-titles-scrollable`]: true,
+    [`${classPrefix}-titles-not-scrollable`]:
+      activeType === 'card' && !isScrollable,
     [`${classPrefix}-titles-${align}`]: align,
   })
 
@@ -166,7 +202,6 @@ export const Tabs: FunctionComponent<Partial<WebTabsProps>> & {
               return (
                 <div
                   key={item.value}
-                  ref={(ref: HTMLDivElement) => titleItemsRef.current.push(ref)}
                   onClick={() => tabChange(item)}
                   className={classNames(`${classPrefix}-titles-item`, {
                     [`nut-tabs-titles-item-active`]:
diff --git a/src/styles/variables-daojia.scss b/src/styles/variables-daojia.scss
index aa79e22adf..13222d0031 100644
--- a/src/styles/variables-daojia.scss
+++ b/src/styles/variables-daojia.scss
@@ -1294,9 +1294,13 @@ $pagination-lite-active-background-color: var(--nutui-pagination-lite-active-bac
 $tabs-titles-height: var(--nutui-tabs-titles-height, 44px) !default;
 $tabs-titles-background-color: var(--nutui-tabs-titles-background-color,
     $color-background) !default;
-$tabs-titles-gap: var(--nutui-tabs-titles-gap, 12px) !default;
+$tabs-titles-gap: var(--nutui-tabs-titles-gap, 8px) !default;
 $tabs-titles-font-size: var(--nutui-tabs-titles-font-size,
-    $font-size-base) !default;
+    $font-size-md) !default;
+$tabs-titles-item-font-family: var(--nutui-tabs-titles-item-font-family,
+    PingFangSC-Semibold) !default;
+$tabs-titles-item-font-weight: var(--nutui-tabs-titles-item-font-weight,
+    $font-weight-bold) !default;
 $tabs-titles-item-min-width: var(--nutui-tabs-titles-item-min-width,
     50px) !default;
 $tabs-titles-item-color: var(--nutui-tabs-titles-item-color,
@@ -1305,8 +1309,10 @@ $tabs-titles-item-active-color: var(--nutui-tabs-titles-item-active-color,
     $color-primary) !default;
 $tabs-titles-item-active-font-weight: var(--nutui-tabs-titles-item-active-font-weight,
     $font-weight-bold) !default;
+$tabs-titles-item-active-font-family: var(--nutui-tabs-titles-item-active-font-family,
+    PingFangSC-Semibold) !default;
 $tabs-titles-item-active-font-size: var(--nutui-tabs-titles-item-active-font-size,
-    $font-size-l) !default;
+    $font-size-md) !default;
 $tabs-titles-item-active-background-color: var(--nutui-tabs-titles-item-active-background-color,
     $color-background-overlay) !default;
 $tabs-tab-line-width: var(--nutui-tabs-tab-line-width, 12px) !default;
@@ -1318,10 +1324,18 @@ $tabs-tab-line-border-radius: var(--nutui-tabs-line-border-radius,
 $tabs-tab-line-opacity: var(--nutui-tabs-tab-line-opacity, 1) !default;
 $tabs-tab-button-border-radius: var(--nutui-tabs-button-border-radius,
     $radius-circle) !default;
+$tabs-tab-button-font-size: var(--nutui-tabs-button-font-size,
+    $font-size-base) !default;
+$tabs-tab-button-active-font-size: var(--nutui-tabs-button-active-font-size,
+    $font-size-base) !default;
+$tabs-tab-button-active-font-weight: var(--nutui-tabs-button-active-font-weight,
+    $font-weight-bold) !default;
+$tabs-tab-button-background-color: var(--nutui-tabs-button-background-color,
+    var(--nutui-color-background-component)) !default;
 $tabs-tab-button-active-background-color: var(--nutui-tabs-button-active-background-color,
     $color-primary-light-pressed) !default;
 $tabs-tab-button-active-border: var(--nutui-tabs-button-active-border,
-    1px solid $color-primary) !default;
+    inset 0 0 0 1px $color-primary) !default;
 $tabs-vertical-titles-width: var(--nutui-tabs-vertical-titles-width,
     100px) !default;
 $tabs-vertical-titles-item-height: var(--nutui-tabs-vertical-titles-item-height,
@@ -1335,7 +1349,7 @@ $tabs-vertical-tab-line-width: var(--nutui-tabs-vertical-tab-line-width,
 $tabs-vertical-tab-line-height: var(--nutui-tabs-vertical-tab-line-height,
     12px) !default;
 $tabs-titles-item-smile-bottom: var(--nutui-tabs-titles-item-smile-bottom,
-    -10%) !default;
+    -25%) !default;
 $tabs-tabpane-padding: var(--nutui-tabs-tabpane-padding, 24px 20px) !default;
 $tabs-tabpane-background-color: var(--nutui-tabs-tabpane-background-color,
     #fff) !default;
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index 6cd805a2ed..fd0eda8336 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -2133,10 +2133,18 @@ $tabs-titles-background-color: var(
   --nutui-tabs-titles-background-color,
   $white
 ) !default;
-$tabs-titles-gap: var(--nutui-tabs-titles-gap, 12px) !default;
+$tabs-titles-gap: var(--nutui-tabs-titles-gap, 8px) !default;
 $tabs-titles-font-size: var(
   --nutui-tabs-titles-font-size,
-  $font-size-base
+  $font-size-md
+) !default;
+$tabs-titles-item-font-family: var(
+  --nutui-tabs-titles-item-font-family,
+  PingFangSC-Semibold
+) !default;
+$tabs-titles-item-font-weight: var(
+  --nutui-tabs-titles-item-font-weight,
+  $font-weight-bold
 ) !default;
 $tabs-titles-item-min-width: var(
   --nutui-tabs-titles-item-min-width,
@@ -2154,9 +2162,13 @@ $tabs-titles-item-active-font-weight: var(
   --nutui-tabs-titles-item-active-font-weight,
   $font-weight-bold
 ) !default;
+$tabs-titles-item-active-font-family: var(
+  --nutui-tabs-titles-item-active-font-family,
+  PingFangSC-Semibold
+) !default;
 $tabs-titles-item-active-font-size: var(
   --nutui-tabs-titles-item-active-font-size,
-  $font-size-l
+  $font-size-md
 ) !default;
 $tabs-titles-item-active-background-color: var(
   --nutui-tabs-titles-item-active-background-color,
@@ -2175,13 +2187,29 @@ $tabs-tab-button-border-radius: var(
   --nutui-tabs-button-border-radius,
   $radius-xs
 ) !default;
+$tabs-tab-button-font-size: var(
+  --nutui-tabs-button-font-size,
+  $font-size-base
+) !default;
+$tabs-tab-button-active-font-size: var(
+  --nutui-tabs-button-active-font-size,
+  $font-size-base
+) !default;
+$tabs-tab-button-active-font-weight: var(
+  --nutui-tabs-button-active-font-weight,
+  $font-weight-bold
+) !default;
+$tabs-tab-button-background-color: var(
+  --nutui-tabs-button-background-color,
+  var(--nutui-color-background-component)
+) !default;
 $tabs-tab-button-active-background-color: var(
   --nutui-tabs-button-active-background-color,
   $color-primary-light-pressed
 ) !default;
 $tabs-tab-button-active-border: var(
   --nutui-tabs-button-active-border,
-  1px solid $color-primary
+  inset 0 0 0 1px $color-primary
 ) !default;
 $tabs-vertical-titles-width: var(
   --nutui-tabs-vertical-titles-width,
@@ -2209,7 +2237,7 @@ $tabs-vertical-tab-line-height: var(
 ) !default;
 $tabs-titles-item-smile-bottom: var(
   --nutui-tabs-titles-item-smile-bottom,
-  -10px
+  -25%
 ) !default;
 $tabs-tabpane-padding: var(--nutui-tabs-tabpane-padding, 24px 20px) !default;
 $tabs-tabpane-background-color: var(
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index a4e73e8736..be91289109 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -2240,10 +2240,18 @@ $tabs-titles-background-color: var(
   --nutui-tabs-titles-background-color,
   $white
 ) !default;
-$tabs-titles-gap: var(--nutui-tabs-titles-gap, 12px) !default;
+$tabs-titles-gap: var(--nutui-tabs-titles-gap, 8px) !default;
 $tabs-titles-font-size: var(
   --nutui-tabs-titles-font-size,
-  $font-size-base
+  $font-size-md
+) !default;
+$tabs-titles-item-font-family: var(
+  --nutui-tabs-titles-item-font-family,
+  PingFangSC-Semibold
+) !default;
+$tabs-titles-item-font-weight: var(
+  --nutui-tabs-titles-item-font-weight,
+  $font-weight-bold
 ) !default;
 $tabs-titles-item-min-width: var(
   --nutui-tabs-titles-item-min-width,
@@ -2261,9 +2269,13 @@ $tabs-titles-item-active-font-weight: var(
   --nutui-tabs-titles-item-active-font-weight,
   $font-weight-bold
 ) !default;
+$tabs-titles-item-active-font-family: var(
+  --nutui-tabs-titles-item-active-font-family,
+  PingFangSC-Semibold
+) !default;
 $tabs-titles-item-active-font-size: var(
   --nutui-tabs-titles-item-active-font-size,
-  $font-size-l
+  $font-size-md
 ) !default;
 $tabs-titles-item-active-background-color: var(
   --nutui-tabs-titles-item-active-background-color,
@@ -2282,13 +2294,29 @@ $tabs-tab-button-border-radius: var(
   --nutui-tabs-button-border-radius,
   $radius-xs
 ) !default;
+$tabs-tab-button-font-size: var(
+  --nutui-tabs-button-font-size,
+  $font-size-base
+) !default;
+$tabs-tab-button-active-font-size: var(
+  --nutui-tabs-button-active-font-size,
+  $font-size-base
+) !default;
+$tabs-tab-button-active-font-weight: var(
+  --nutui-tabs-button-active-font-weight,
+  $font-weight-bold
+) !default;
+$tabs-tab-button-background-color: var(
+  --nutui-tabs-button-background-color,
+  var(--nutui-color-background-component)
+) !default;
 $tabs-tab-button-active-background-color: var(
   --nutui-tabs-button-active-background-color,
   $color-primary-light
 ) !default;
 $tabs-tab-button-active-border: var(
   --nutui-tabs-button-active-border,
-  1px solid $color-primary
+  inset 0 0 0 1px $color-primary
 ) !default;
 $tabs-vertical-titles-width: var(
   --nutui-tabs-vertical-titles-width,
@@ -2312,7 +2340,7 @@ $tabs-vertical-tab-line-height: var(
 ) !default;
 $tabs-titles-item-smile-bottom: var(
   --nutui-tabs-titles-item-smile-bottom,
-  -10px
+  -25%
 ) !default;
 $tabs-tabpane-padding: var(--nutui-tabs-tabpane-padding, 24px 20px) !default;
 $tabs-tabpane-background-color: var(
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index a4df66f6fc..4b5ad0014e 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -2105,15 +2105,23 @@ $pagination-lite-active-background-color: var(
 ) !default;
 
 // tabs（✅）
-$tabs-titles-height: var(--nutui-tabs-titles-height, scale-px(44px)) !default;
+$tabs-titles-height: var(--nutui-tabs-titles-height, scale-px(36px)) !default;
 $tabs-titles-background-color: var(
   --nutui-tabs-titles-background-color,
-  $color-background
+  $color-background-overlay
 ) !default;
-$tabs-titles-gap: var(--nutui-tabs-titles-gap, scale-px(12px)) !default;
+$tabs-titles-gap: var(--nutui-tabs-titles-gap, scale-px(8px)) !default;
 $tabs-titles-font-size: var(
   --nutui-tabs-titles-font-size,
-  $font-size-base
+  $font-size-md
+) !default;
+$tabs-titles-item-font-family: var(
+  --nutui-tabs-titles-item-font-family,
+  PingFangSC-Semibold
+) !default;
+$tabs-titles-item-font-weight: var(
+  --nutui-tabs-titles-item-font-weight,
+  $font-weight-bold
 ) !default;
 $tabs-titles-item-min-width: var(
   --nutui-tabs-titles-item-min-width,
@@ -2131,15 +2139,19 @@ $tabs-titles-item-active-font-weight: var(
   --nutui-tabs-titles-item-active-font-weight,
   $font-weight-bold
 ) !default;
+$tabs-titles-item-active-font-family: var(
+  --nutui-tabs-titles-item-active-font-family,
+  PingFangSC-Semibold
+) !default;
 $tabs-titles-item-active-font-size: var(
   --nutui-tabs-titles-item-active-font-size,
-  $font-size-l
+  $font-size-md
 ) !default;
 $tabs-titles-item-active-background-color: var(
   --nutui-tabs-titles-item-active-background-color,
   $color-background-overlay
 ) !default;
-$tabs-tab-line-width: var(--nutui-tabs-tab-line-width, scale-px(12px)) !default;
+$tabs-tab-line-width: var(--nutui-tabs-tab-line-width, scale-px(16px)) !default;
 $tabs-tab-line-height: var(--nutui-tabs-tab-line-height, scale-px(2px)) !default;
 $tabs-tab-line-color: var(--nutui-tabs-tab-line-color, $color-primary) !default;
 $tabs-tab-line-bottom: var(--nutui-tabs-line-bottom, 15%) !default;
@@ -2150,7 +2162,23 @@ $tabs-tab-line-border-radius: var(
 $tabs-tab-line-opacity: var(--nutui-tabs-tab-line-opacity, 1) !default;
 $tabs-tab-button-border-radius: var(
   --nutui-tabs-button-border-radius,
-  $radius-circle
+  scale-px(6px)
+) !default;
+$tabs-tab-button-font-size: var(
+  --nutui-tabs-button-font-size,
+  $font-size-base
+) !default;
+$tabs-tab-button-active-font-size: var(
+  --nutui-tabs-button-active-font-size,
+  $font-size-base
+) !default;
+$tabs-tab-button-active-font-weight: var(
+  --nutui-tabs-button-active-font-weight,
+  $font-weight-bold
+) !default;
+$tabs-tab-button-background-color: var(
+  --nutui-tabs-button-background-color,
+  var(--nutui-color-background-component)
 ) !default;
 $tabs-tab-button-active-background-color: var(
   --nutui-tabs-button-active-background-color,
@@ -2158,7 +2186,7 @@ $tabs-tab-button-active-background-color: var(
 ) !default;
 $tabs-tab-button-active-border: var(
   --nutui-tabs-button-active-border,
-  scale-px(1px) solid $color-primary
+  inset 0 0 0 scale-px(1px) $color-primary
 ) !default;
 $tabs-vertical-titles-width: var(
   --nutui-tabs-vertical-titles-width,
@@ -2186,7 +2214,7 @@ $tabs-vertical-tab-line-height: var(
 ) !default;
 $tabs-titles-item-smile-bottom: var(
   --nutui-tabs-titles-item-smile-bottom,
-  -10%
+  -25%
 ) !default;
 $tabs-tabpane-padding: var(--nutui-tabs-tabpane-padding, scale-px(24px) scale-px(20px)) !default;
 $tabs-tabpane-background-color: var(