Next.js classes don't change properties of div element

Question

I'm having an issue with nextjs/reactjs. I have two tsx files: index.tsx and customAlert.tsx. The issue that I'm having is that the alert doesn't seem to change colour even though the css classes are added to the alert html element. For css I'm using tailwind and it works fine and it's not the issue.

pages/_app.tsx

import type { AppProps } from "next/app"
import "tailwindcss/tailwind.css"

export default function MyApp({ Component, pageProps }: AppProps) {
    return <Component {...pageProps} />
}

components/customAlert.tsx

export default function customAlert(status: string, title: string, message: string) {
    const types: {[key: string]: any} = {success: "green", error: "red", warning: "yellow"}
    const colour = types[status]

    return (
        <>
            <div id="alert" className="absolute bottom-0 right-0 mb-4 mr-4">
                <div className={`bg-${colour}-500 text-white font-bold rounded-t px-4 py-2`}>
                    {title}
                </div>
                <div className={`border border-t-0 border-${colour}-400 rounded-b bg-${colour}-100 px-4 py-3 text-${colour}-700`}>
                    <p>{message}</p>
                </div>
            </div>
        </>
    )
}

pages/index.tsx

import customAlert from "../components/customAlert"


export default function Index() {
    return(
        <div>
            {customAlert("success", "hi mom", "hi mom")}
        </div>
    )
}

how it should look like

how it looks like

they work when i manually assign them to the element without the colour variable — JohnWhitehall, Jun 08 '22 at 14:42
the css rules are just stock tailwindcss rules I haven't altered anything — JohnWhitehall, Jun 08 '22 at 15:15
Can you share what is on the element in the developer console? — DocCaliban, Jun 08 '22 at 18:30
What about the computed css? Are the styles being overwritten by something else? — DocCaliban, Jun 08 '22 at 19:03
look at the screenshots attached at the bottom of the thread — JohnWhitehall, Jun 08 '22 at 19:09

score 0 · Accepted Answer · answered Jun 09 '22 at 03:04

Please checkout the class-detection-in-depth of tailwind. You should not construct class names dynamically.

Wrong:

bg-${colour}-100

You can creat a function or any other way to make sure any class names you’re using exist in full:

    const getColorClass = (color) => {
  switch (color) {
    case 'success':
      return 'bg-green-100';
    case 'error':
      return 'bg-red-100';
    default:
      return 'bg-yellow-100';
  }
}

Next.js classes don't change properties of div element

1 Answers1