Issue with grid-cols-3

[Leon12-aaryson]

When you use grid-cols-4 or any other it works fine

here is the code:

<div className="grid grid-cols-4 sm:grid-cols-1 gap-10">
    <div className="p-4">
      <h4 className="text-white font-bold text-2xl mb-4">About Library Local</h4>
      <p className="text-white">
        Library Locale is a project that was started out of passion to
        build systems that provide a common African child a platform to
        read and share knowledge.
      </p>
    </div>
    <div className="p-4">
      <h4 className="text-white font-bold text-2xl mb-4">About Library Local</h4>
      <p className="text-white">
        Library Locale is a project that was started out of passion to
        build systems that provide a common African child a platform to
        read and share knowledge.
      </p>
    </div>
    <div className="p-4">
      <h4 className="text-white font-bold text-2xl mb-4">Important links</h4>
      <p className="text-white">
        Library Locale is a project that was started out of passion to
        build systems that provide a common African child a platform to
        read and share knowledge.
      </p>
    </div>
</div>

When you use grid-cols-3 it always doesn't seem to work.

<div className="grid grid-cols-3 sm:grid-cols-1 gap-10">
    <div className="p-4">
      <h4 className="text-white font-bold text-2xl mb-4">About Library Local</h4>
      <p className="text-white">
        Library Locale is a project that was started out of passion to
        build systems that provide a common African child a platform to
        read and share knowledge.
      </p>
    </div>
    <div className="p-4">
      <h4 className="text-white font-bold text-2xl mb-4">About Library Local</h4>
      <p className="text-white">
        Library Locale is a project that was started out of passion to
        build systems that provide a common African child a platform to
        read and share knowledge.
      </p>
    </div>
    <div className="p-4">
      <h4 className="text-white font-bold text-2xl mb-4">Important links</h4>
      <p className="text-white">
        Library Locale is a project that was started out of passion to
        build systems that provide a common African child a platform to
        read and share knowledge.
      </p>
    </div>
</div>

• I have been trying this out since morning and it seems to be persistent which

[wongjn]

Consider checking:

• Tailwind has compiled since you added the class.
• The content file globs sufficiently cover the file that the code appears in.
• String concatenation/interpolation is not used to build the class name.
• The class name would resolve to a Tailwind class that Tailwind would generate a rule for.

Otherwise, consider providing a project that reproduces the unexpected behavior.

[wongjn]

Consider providing a project that reproduces the unexpected behavior please, so that we can debug further.

[Leon12-aaryson]

I don't get what you mean I provide a project, do you need me to provide you with the entire project??

[wongjn]

Some sort of project that reproduces your unexpected behavior would be useful, yes. As it seems for some reason local to your project, grid-cols-4 is overriding sm:grid-cols-1 for viewports wider than 640px when it shouldn't, as exhibited by this Tailwind Play.

Otherwise, if you are using default screens configuration, consider removing sm:grid-cols-1 so that grid-cols-3 is not overridden by sm:grid-cols-1 for viewports larger than 640px.

[Leon12-aaryson]

I'm using default screens, so should I assume that the issue is with my local machine, coz I just did an update and on what I'm doing and ended up reinstalling all these packages afresh

[Leon12-aaryson]

I had checked the output.css file produced after compiling the css and it didn't have the grid-cols-3

which means that is you want to use the grid-cols-3 you need to just customize it
Well on my case I'm quite new to tailwind but have worked with css for a long time so I definitely just go for what works for my intensions

However I moved forward with just using the flex with flex-col and it did just what I was planning to achieve with grids