Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Importing an object with reusable tailwindCSS classes from another .ts file and using its key values in a Nextjs React component does not seem to work

Im trying to import an object containing reusable TailwindCSS classes and reuse these classes across my app. For some reason I need to copy + paste this object locally INSIDE the react component I want to use it in for it to work.

// 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',
};

When I try to import it from a typescript constants file the classes get applied in the DOM but dont do anything style wise?

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

The code above only works if the ElementTypeColors object is declared within the component itself and does not work when importing it for another file.
This feels unsustainable. If I decide to change the color setup for 1 key in this object I need to manually change it in all the instances of this object across my app.

I’m using Next.js 14 and React 18.

Does any one know how to fix if at all possible! cheeers!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    My tailwind config file:

    
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;

    Also here is an element with correct tailwind classes in the DOM without any color classes taking effect (displays as transparent) bg-blue-400 dark:bg-blue-800:

    <div
    class="rounded-lg border text-card-foreground shadow-sm border-none p-1 col-span-1 bg-blue-400 dark:bg-blue-800 row-start-3 text-[12px] overflow-hidden"
>
    <div class="z-20 relative">
        <div><p class="flex justify-between items-center">6</p></div>
        <h2 class="text-center scroll-m-2 leading-6 text-2xl font-semibold tracking-tight mb-1">
            C
        </h2>
        <p class="text-center text-ellipsis overflow-hidden">Carbon</p>
        <p class="text-center">12.011</p>
    </div>
</div>

  2. 0

    Thanks @Rico for giving a good hint on where the bug could be. After tinkering around with the tailwind.config.ts file I noticed that there is a content array in the config file which seems to set the directories from which tailwindCSS searches the classes for you JSX.

    TLDR;

    const config = {
    ...
    content: [
        './pages/**/*.{ts,tsx}',
        './components/**/*.{ts,tsx}',
        './app/**/*.{ts,tsx}',
        './src/**/*.{ts,tsx}',
        './constants/**/*.{ts,tsx}', // <- Add this to include the constants or any other custom folder in TailwindCSS's class search.
    ],
  }
...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search