Next.js & TailwindCSS how to re-use styles on a component in the same component file?

Question

Working on my first Next.js 14 project and quickly found out the theme I'd authored in Chakra UI will not work with server components (reference: Support for NextJS 14) until Chakra UI version 3 is released and as I'm not wanting to use the use client for every component I'm going to learn TailwindCSS and re-write everything.

That said I have a component in Chakra UI:

interface DefStyles {
  fontFamily: string
  fontWeight: string
  textAlign: string
  mb: string
  mx: string
  maxWidth: string
}

const defStyles: DefStyles = {
  fontFamily: 'heading',
  fontWeight: 'semibold',
  textAlign: 'center',
  mb: '4',
  mx: '5',
  maxWidth: 'lg',
}

interface Props {
  foo: string
  bar: string
}

// stripped component
export default function ChakraComponent({ foo, bar }: Props) {
  return (
    <Flex
      justify="center"
      w="full"
      direction="column"
      align="center"
    >
      <Text as="h3" color="primary.500" fontSize="xs" {...defStyles}>
        {foo}
      </Text>
      <Text color="white" {...defStyles}>
        {bar}
      </Text>
    </Flex>
  )
}

that I'm spreading some default styles:

const defStyles: DefStyles = {
  fontFamily: 'heading',
  fontWeight: 'semibold',
  textAlign: 'center',
  mb: '4',
  mx: '5',
  maxWidth: 'lg',
}

when I create this in TailwindCSS:

export default function TailwindComponent({ foo, bar }: Props) {
  return (
    <div className="p-6 w-full flex justify-center flex-col items-center">
      <h3 className='text-sm text-primary'>{foo}</h3>
      <p className="text-white">{bar}</p>
    </div>
  )
}

I'm stuck trying to figure out how to re-use some common styles. I've read about:

• What is the purpose of the Tailwind @layer directive? but that seems like overkill for trying to adhere to D.R.Y. for two elements by adding to global.css.
• CSS Modules but again, to be D.R.Y. for a few lines of code to create a file and import seems a bit extreme.

Research:

• Dynamic TailwindCSS custom styles not applied in Next.js components
• How to style React component with TailwindCSS
• How to use TailwindCSS with React Server Components (Next.js)
• How to make a styled circle component using tailwindcss?
• Tailwindcss not working in some of components in React / Next.js

what is the correct way I can re-use this on a component level in the same component file?

Answer 1

Create a variant of the Text component. So a new component called <MyNewText> which has those styles in the className via tailwind