Tailwind CSS custom width and height not working, although the same values can be applied using straight CSS

Question

I am using Tailwind CSS in React and I am trying to set a width of 500px for my images div. But the width of the div does not increase more than 300px.

<div className="flex flex-row gap-4 mb-12">

    <div className='images px-6 basis-0'>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

        <div className=' img bg-primary mb-4 w-[300px] h-[300px]'>
        </div>

    </div>

    <div className='product_info basis-0'>
        ...
    </div>

</div>

When I change the width in the custom classes from 300px to 500px the boxes just disappear:

If I manually adjust the width and height using CSS, it works fine.

.img{
  width: 500px;
  height: 300px;
}

I don't understand what is causing this issue :(

Answer 1

I had a similar issue and I managed to fix it by including the directory of my custom components in the tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  important: true,
  content: [
    "./src/pages/**/*.{js,jsx,ts,tsx}",
    "./src/sections/**/*.{js,jsx,ts,tsx}",
    "./src/components/**/*.{js,jsx,ts,tsx}",
  ],
  plugins: [],
}

Now, for me setting the height for <div> elements works fine, e.g.:

import * as React from "react";
import Section from "../components/section";

const AboutSection = () => {
  return (
    <Section id="about">
      <div className="m-0 flex h-[384px] w-full flex-col p-0 md:h-[512px] lg:h-[640px] xl:h-[768px]">
        <h1>About Me</h1>
      </div>
    </Section>
  );
};

export default AboutSection;