Change font size for tab components altogether in chakra-ui

I'm building a simple website that has some tabs page using chakra-UI.
However, I'm confused about the way of changing the font size of some Tab components altogether.

For example, change the font size of each Tab component like below,

        <Tabs>
            <TabList> //These are redundant...
                <Tab fontsize={{base: "5px", sm: "10px", md: "15px"}}>First</Tab>
                <Tab fontsize={{base: "5px", sm: "10px", md: "15px"}}>Second</Tab>
                <Tab fontsize={{base: "5px", sm: "10px", md: "15px"}}>Third</Tab>
            </TabList>
            <TabPanels>
                <TabPanel>
                    First
                </TabPanel>
                <TabPanel>
                    Second
                </TabPanel>
                <TabPanel>
                    Third
                </TabPanel>
            </TabPanels>
        </Tabs>

The above way seems to be redundant. I'm searching for a way that can change together. For example, as below

        <Tabs>
            <TabList fontsize={{base: "5px", sm: "10px", md: "15px"}}> //This is more simple(But this will cause an error).
                <Tab>First</Tab>
                <Tab>Second</Tab>
                <Tab>Third</Tab>
            </TabList>
            <TabPanels>
                <TabPanel>
                    First
                </TabPanel>
                <TabPanel>
                    Second
                </TabPanel>
                <TabPanel>
                    Third
                </TabPanel>
            </TabPanels>
        </Tabs>

The above way is more simple(But this does not work).
I have read the documents of chakra-UI that customizes the default theme and customizes a component style. However, these ways will change the entire website setting. I want to change a part of a website setting.

I have learned some about javascript/typescript, but very little about HTML/CSS, so I don't know much about website styling.

Is there any way to do this?