从另一个 .ts 文件导入具有可重用 tailwindCSS 类的对象并在 Nextjs React 组件中使用其键值似乎不起作用

Question

我正在尝试导入一个包含可重用 TailwindCSS 类的对象，并在我的应用程序中重用这些类。由于某种原因，我需要在本地复制+粘贴这个对象到我想要使用它的反应组件中，以使其工作。

// constants.ts (I want to reuse this object eg. (className={ElementTypeColors[type]}))

export const ElementTypeColors: { [key in IElementType]: string } = {
    'alkali metal': 'bg-lime-400 dark:bg-lime-800',
    metalloid: 'bg-yellow-400 dark:bg-yellow-900',
    actinide: 'bg-orange-400 dark:bg-orange-900',
    'alkali earth metal': 'bg-red-400 dark:bg-red-800',
    'reactive non-metal': 'bg-blue-400 dark:bg-blue-800',
    'unknown type': 'bg-gray-400 dark:bg-gray-700',
    'transition metal': 'bg-violet-400 dark:bg-violet-800',
    'noble gas': 'bg-fuchsia-400 dark:bg-fuchsia-800',
    'post-transition metal': 'bg-teal-400 dark:bg-teal-800',
    lanthanide: 'bg-sky-400 dark:bg-sky-800',
};

当我尝试从打字稿常量文件导入它时，类会应用到 DOM 中，但不会做任何风格方面的事情？

// Component.tsx
<Card className={`border-none p-1 col-span-1 ${ElementTypeColors[element.Type]}`}>

上面的代码仅在组件本身内声明

ElementTypeColors

对象时才有效，并且在将其导入到另一个文件时不起作用。 这感觉是不可持续的。如果我决定更改此对象中 1 个键的颜色设置，我需要在我的应用程序中此对象的所有实例中手动更改它。

我正在使用 Next.js 14 和 React 18。

如果可能的话，有谁知道如何解决吗？干杯！

Answer 1

我的顺风配置文件：

const config = {
    darkMode: ['class'],
    content: [
        './pages/**/*.{ts,tsx}',
        './components/**/*.{ts,tsx}',
        './app/**/*.{ts,tsx}',
        './src/**/*.{ts,tsx}',
    ],
    prefix: '',
    theme: {
        container: {
            center: true,
            padding: '1rem',
            screens: {
                '2xl': '1448px',
            },
        },
        extend: {
            gridTemplateColumns: {
                '18': 'repeat(18, minmax(0, 1fr))',
            },
            gridColumnStart: {
                '14': '14',
                '15': '15',
                '16': '16',
                '17': '17',
                '18': '18',
                '19': '19',
            },
            gridrowStart: {
                '14': '14',
                '15': '15',
                '16': '16',
                '17': '17',
                '18': '18',
                '19': '19',
            },
            gridColumn: {
                'span-13': 'span 13 / span 13',
                'span-14': 'span 14 / span 14',
                'span-15': 'span 15 / span 15',
                'span-16': 'span 16 / span 16',
                'span-17': 'span 17 / span 17',
                'span-18': 'span 18 / span 18',
                'span-19': 'span 19 / span 19',
            },
            colors: {
                border: 'hsl(var(--border))',
                input: 'hsl(var(--input))',
                ring: 'hsl(var(--ring))',
                background: 'hsl(var(--background))',
                foreground: 'hsl(var(--foreground))',
                primary: {
                    DEFAULT: 'hsl(var(--primary))',
                    foreground: 'hsl(var(--primary-foreground))',
                },
                secondary: {
                    DEFAULT: 'hsl(var(--secondary))',
                    foreground: 'hsl(var(--secondary-foreground))',
                },
                destructive: {
                    DEFAULT: 'hsl(var(--destructive))',
                    foreground: 'hsl(var(--destructive-foreground))',
                },
                muted: {
                    DEFAULT: 'hsl(var(--muted))',
                    foreground: 'hsl(var(--muted-foreground))',
                },
                accent: {
                    DEFAULT: 'hsl(var(--accent))',
                    foreground: 'hsl(var(--accent-foreground))',
                },
                popover: {
                    DEFAULT: 'hsl(var(--popover))',
                    foreground: 'hsl(var(--popover-foreground))',
                },
                card: {
                    DEFAULT: 'hsl(var(--card))',
                    foreground: 'hsl(var(--card-foreground))',
                },
            },
            borderRadius: {
                lg: 'var(--radius)',
                md: 'calc(var(--radius) - 2px)',
                sm: 'calc(var(--radius) - 4px)',
            },
            keyframes: {
                'accordion-down': {
                    from: { height: '0' },
                    to: { height: 'var(--radix-accordion-content-height)' },
                },
                'accordion-up': {
                    from: { height: 'var(--radix-accordion-content-height)' },
                    to: { height: '0' },
                },
                wiggle: {
                    '0%, 100%': { transform: 'rotate(-3deg)' },
                    '50%': { transform: 'rotate(3deg)' },
                },
            },
            animation: {
                'accordion-down': 'accordion-down 0.2s ease-out',
                'accordion-up': 'accordion-up 0.2s ease-out',
            },
        },
    },
    plugins: [require('tailwindcss-animate')],
} satisfies Config;

export default config;