'tailwind css responsive not working on state change [react, tailwind]

I'm building a react app using Tailwind CSS 3.0.23. I'm trying to achieve the dynamic size of an image on state change.

I'm using 3 toggle button groups from mui for changing the size of the image: L, M, and S.

The ideal result: When I clicked one of those buttons, according to size, the image should be resized.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon.png" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="js/wavesufer.js"></script>
  </body>
</html>

package.json

"dependencies": {
    "@mui/material": "^5.4.4",
    "flowbite": "^1.3.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0",
}
"devDependencies": {
    "autoprefixer": "^10.4.2",
    "gh-pages": "^3.2.3",
    "postcss": "^8.4.7",
    "tailwindcss": "^3.0.23"
},

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/flowbite/**/*.js'],
  theme: {
    extend: {},
  },
  plugins: [require('flowbite/plugin')],
  variants: {
    display: ['responsive'],
  },
};

resizeImage.jsx: toggle buttons

<ToggleButtonGroup
     value={characterSize}
     onChange={handleCharacterSize}
     className="mt-1 mr-2"
     size="small"
     orientation="vertical"
     exclusive>
         <ToggleButton value="l" aria-label="list">
             <span title="Large size">L</span>
         </ToggleButton>
         <ToggleButton value="m" aria-label="module">
             <span title="Medium size">M</span>
         </ToggleButton>
         <ToggleButton value="s" aria-label="quilt">
             <span title="Size size">S</span>
         </ToggleButton>
</ToggleButtonGroup>

resizeImage.jsx: states

const [characterSize, setCharacterSize] = useState('');

const handleCharacterSize = (e, value) => {
   setCharacterSize(value);
   console.log(characterSize); // which is correct: either of 'l', 'm', or 's' comes here.
   Cookies.set('charSize', value);
};

resizeImage.jsx: very top position right below imports (not in the component)

const characterSizes = {
  l: 16,
  m: 14,
  s: 10,
};

resizeImage.jsx: actual jsx

<React.Fragment key={item}>
     <img alt={item}
          src={require(`../../public/data/${item}.png`)}
          className={`w-${characterSizes[characterSize]}`}/>
</React.Fragment>

The DOM has successfully been updated. I can see DOM is updating that w-16, w-14, or w-10 respectively in the image class. But the UI is not changing.

Any other static responsive classes are all working.

reactjs tailwind-css

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'tailwind css responsive not working on state change [react, tailwind]

Sources

Related Questions