Tailwind 合并不适用于 CSS 模块

Question

我有一个 Next.js 项目，我正在使用 Tailwind 来设置元素的样式。我使用 Tailwind 的合并功能来解决组件中的类优先级问题。然而，Tailwind 的合并功能似乎无法与 CSS 模块正常工作（我使用了 Tailwind apply 方法）。

这是我的组件

import classes from './styles.module.scss';
import type { FC, PropsWithChildren } from 'react';
import type { TextProps } from './props';
import {twMerge} from "tailwind-merge";

const Text: FC<PropsWithChildren & TextProps> = ({
    color,
    variant = 'p',
    className,
    children,
}) => {
    const HTMLTAG = variant;
    return (
        <HTMLTAG
            className={twMerge(`${classes[variant]} ${classes[color || '']}`, className)}
        >
            {children}
        </HTMLTAG>
    );
};

export default Text;

这是样式文件

.h1 {
    @apply text-6xl font-semibold text-text-hover sm:text-2xl;
}

.h2 {
    @apply text-4xl font-semibold text-text-hover sm:text-xl;
}

.h3 {
    @apply text-3xl font-semibold sm:text-base;
}

.h4 {
    @apply text-xl font-semibold;
}

.h5 {
    @apply text-lg font-semibold;
}

.h6 {
    @apply text-base font-semibold;
}

.p,
.span {
    @apply text-base text-text-main;
}

.primary{
    @apply text-primary-main;
}

.text {
    @apply text-text-main;
}

这是该组件的 props 类型

export interface TextProps {
    variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
    color?: 'primary' | 'text';
    className?: string;
}

这是我的顺风配置文件

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    colors: {
      white: '#fff',
      transparent:'transparent',
      primary: {
        main: '#FBBF24',
        hover: '#F59E0B',
        light: '#FDE68A',
        pale: '#FFFBEB'
      },
      secondary: {
        main: '#8B5CF6',
        hover: '#6D28D9',
        light: '#C4B5FD',
        pale:'#EDE9FE'
      },
      success:{
        main: '#25984E',
        hover: '#166534',
        light: '#DCFCE7',
        pale: '#F0FDF4'
      },
      error: {
        main: '#FCA5A5',
        hover: '#DC2626',
        light: '#FEE2E2',
        pale: '#FEF2F2'
      },
      overlay: '#1E1E1E52',
      text: {
          hover: '#1E293B',
          dark: '#334155',
          main: '#475569',
          light: '#64748B',
          pale: '#94A3B8'
      },
      border: {
          dark: '#CBD5E1',
          light: '#F3F4F6',
          input: '#E2E8F0',
          focused: '#C7D2FE',
          disabled: '#FEE2E2'
      },
      bg: {
          dark: '#F8FAFC',
          light: '#FEFEFE'
      },
    },
    boxShadow:{
      'softSmall': '0px 8px 16px 0px #1111111F',
      'softMedium': '0px 20px 24px 0px #1111111F',
      'softLarge': '0px 32px 64px 0px #1111111F',
      'strokeSmall': '0px 0px 1px 0px #091E424F, 0px 3px 8px 0px #091E4229',
      'strokeMedium': '0px 0px 1px 0px #091E424F, 0px 9px 12px 0px #091E4226',
      'strokeLarge': '0px 0px 1px 0px #091E424F, 0px 14px 18px 0px #091E4226',
      'indigoSmall': '0px 8px 16px 0px #FFF6D3CC',
      'indigoMedium': '0px 20px 24px 0px #FBBF2433',
      'indigoLarge': '0px 32px 64px 0px #FBBF2433'
    },
    screens: {
      xl: { max: "1279px" },
      // => @media (max-width: 1279px) { ... }

      lg: { max: "1023px" },
      // => @media (max-width: 1023px) { ... }

      md: { max: "767px" },
      // => @media (max-width: 767px) { ... }

      sm: { max: "639px" },
      // => @media (max-width: 639px) { ... }
    },
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      flex: {
        '2': '2 2 0%'
      }
    },
  },
  plugins: [],
};
export default config;

提前感谢您的帮助。

Answer 1

twMerge（Tailwind 的合并）实用程序旨在合并 Tailwind CSS 类并处理冲突的类名，但它不能直接识别 CSS 模块中的类，因为 CSS 模块在运行时生成作用域类名。

import type { FC, PropsWithChildren } from 'react';
import type { TextProps } from './props';
import { twMerge } from "tailwind-merge";
const Text: FC<PropsWithChildren & TextProps> = ({
  color,
  variant = 'p',
  className,
  children,
}) => {
  const HTMLTAG = variant;
  const baseClasses = {
    h1: 'text-6xl font-semibold text-text-hover sm:text-2xl',
    h2: 'text-4xl font-semibold text-text-hover sm:text-xl',
    h3: 'text-3xl font-semibold sm:text-base',
    h4: 'text-xl font-semibold',
    h5: 'text-lg font-semibold',
    h6: 'text-base font-semibold',
    p: 'text-base text-text-main',
    span: 'text-base text-text-main',
  };
  const colorClasses = {
    primary: 'text-primary-main',
    text: 'text-text-main',
  };
  const finalClassName = twMerge(
    baseClasses[variant],
    color ? colorClasses[color] : '',
    className
  );
  return <HTMLTAG className={finalClassName}>{children}</HTMLTAG>;
};
export default Text;