CODEWITHSUNDEEP
reactjstailwind-css
L_nnd
L_nnd

Reputation: 41

Tailwind properties in a react component only working when there is a code in commentary above

I am coding a button class with tailwind in react which manages 3 colors of buttons (white, blue-navy and gray). A secondaryColor() function manages the color of the text inside the button. This function actually return the opposite color of the button. In the tailwind code, there is a ternary condition which handles the hover attribute of the button.

The fact is, the code works pretty well without the ternary condition but when I add this section, white button has no background color and the border color is the default one for all buttons.

const Button = ({content, color, borderColor}) => {
/* console.log("I need this line make the code work)"*/

    return (
        <button>
            <div className={`h-9 px-3 mx-4
                flex items-center
                bg-${color}
                text-${secondaryColor(color)}
                border-${borderColor}
                border-2 rounded-md
                ${color === "white" || color === "gray" ?
                "hover:bg-blue-navy hover:text-white" :
                "hover:bg-white hover:text-blue-navy"}
            `}>
                {content}
            </div>
        </button>
    );

};

export default Button;

Here you can find the code which initiates the buttons :

<Button content="Button 1" color="white" borderColor="white"/>
<Button content="Button 2" color="blue-navy" borderColor="white"/>

The two following images show how it should work without the commentary ligne but it works only when there is the commentary line.

enter image description here

Works perfectly when button 1 is hover :

enter image description here

These or the images when there is no commentary line :

enter image description here

You can notice when button 2 is hover that the border color is the default one. (a very light gray)

enter image description here

And finally, If I nom run start with the commentary and delete it when the server is still running; nothing happens. But If I restart the server then, changes apply.

If anyone can help me through I would be very glad. thank you !

Upvotes: 0

Views: 37

Answers (1)

Wongjn
Wongjn

Reputation: 24313

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes. Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

You could:

  • Have the entire class in the variable you pass to className like

    const Button = ({content, color, borderColor}) => {
  return (
    <button>
      <div className={`h-9 px-3 mx-4
        flex items-center
        ${color}
        ${secondaryColor(color)}
        ${borderColor}
        border-2 rounded-md
        ${color === "bg-white" || color === "bg-gray" ?
    >

    <Button content="Button 1" color="bg-white" borderColor="border-white"/>
<Button content="Button 2" color="bg-blue-navy" borderColor="border-white"/>

  • Have a dictionary for color to Tailwind class names:

    const BG_DICTIONARY = {
  white: 'bg-white',
  'blue-navy': 'bg-blue-navy',
  // …
};

const BORDER_DICTIONARY = {
  white: 'border-white',
  // …
};

const Button = ({content, color, borderColor}) => {
  return (
    <button>
      <div className={`h-9 px-3 mx-4
        flex items-center
        ${BG_DICTIONARY[color]}
        ${secondaryColor(color)}
        ${BORDER_DICTIONARY[borderColor]}
        border-2 rounded-md
        ${color === "white" || color === "gray" ?
    >

  • safelist the classes, if you have a limited number of known colors:

    module.exports = {
  safelist: [
    { pattern: /^bg-(white|blue-navy|…)$/ },
    { pattern: /^text-…$/ },
    { pattern: /^border-(white|…)$/ },
    // …
  ],
  // …
];

Upvotes: 1

Related Questions