Next.js+TailwindCSS：如何在同一组件文件内复用组件样式？

同一组件内复用Tailwind样式的几种简洁方案 #

1. 定义字符串常量直接复用

最直接的方式是把通用样式抽成字符串常量，在需要的地方拼接使用，完全不需要额外文件或工具：

interface Props {
  foo: string
  bar: string
}

// 对应原Chakra的defStyles，转换成Tailwind类
const baseTextClasses = "font-heading font-semibold text-center mb-4 mx-5 max-w-lg";

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

2. 使用clsx工具处理类名（推荐）

如果后续需要添加条件类名，clsx能更优雅地处理类名拼接，避免字符串拼接的混乱：

首先安装clsx：

npm install clsx
# 或
yarn add clsx

然后在组件中使用：

import clsx from 'clsx';

interface Props {
  foo: string
  bar: string
}

const baseTextClasses = "font-heading font-semibold text-center mb-4 mx-5 max-w-lg";

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

3. 抽成内部自定义组件

如果这个文本样式在组件内多次使用，或者未来可能扩展，把它抽成组件内的小型自定义组件会更符合React的组件化思想：

interface Props {
  foo: string
  bar: string
}

// 内部复用组件
interface BaseTextProps {
  children: React.ReactNode
  className?: string
  as?: 'p' | 'h3' | 'h2' // 支持自定义标签
}

const BaseText = ({ children, className = "", as = 'p' }: BaseTextProps) => {
  const Tag = as;
  return (
    <Tag className={`font-heading font-semibold text-center mb-4 mx-5 max-w-lg ${className}`}>
      {children}
    </Tag>
  )
}

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

这些方案都不需要修改全局CSS或创建额外的CSS文件，完全在当前组件文件内完成样式复用，符合轻量需求。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ