Issue with "grid-cols-10" not working in Tailwind CSS

[Sathishkumar0404]

Hi everyone,

I'm facing an unusual issue with Tailwind CSS where the grid-cols-10 class is not working as expected. Strangely, grid-cols-11 works fine. I've double-checked for typos, conflicting styles, and even tried restarting my development server, but the problem persists.

Here's a simplified version of my code:

<div className="grid gap-5 px-4 grid-cols-10">
    <label htmlFor="rules_field" className="col-span-3 text-xs mb-2 text-gry-700">
        Field
    </label>
    <label htmlFor="rules_operator" className="col-span-3 text-xs mb-2 text-gry-700">
        Operator
    </label>
    <label htmlFor="rules_value" className="col-span-3 text-xs mb-2 text-gry-700">
        Value
    </label>
</div>

[AM-NiceDay]

Hey @Sathishkumar0404!

I tried your code example in Tailwind Play, and it worked as expected - you can find it here: https://play.tailwindcss.com/iUepkYbt2Z.

To fix the issue, please check your Tailwind Configuration and ensure the following:

• The file containing your shared code is included in the content configuration space.
• You haven't modified the gridTemplateColumns property in the theme.

[inlancersystem4]

https://play.tailwindcss.com/X43M8bndhy

[AM-NiceDay]

Can you please provide the relative path to the source file where you are using grid-cols-10?

[Sathishkumar0404]

Sure, The file located at ''./components/FormArrayComponent.jsx''.

[Sathishkumar0404]

The issue has been resolved by adding the file path to the tailwind.config.js file.

The main component where I was encountering the error is located in the containers directory. By adding the following path to the Tailwind CSS configuration, the problem was fixed:

'./containers/**/*.{js,ts,jsx,tsx,mdx}',

[bigg-S]

Hello, I am having the same issue with the grid class, tailwindcss@4 which doesn't use a config file. Anybody got an idea how I can work around this?

[inlancersystem4]

Hey @Sathishkumar0404!

I tried your code example in Tailwind Play, and it worked as expected - you can find it here: https://play.tailwindcss.com/iUepkYbt2Z.

To fix the issue, please check your Tailwind Configuration and ensure the following:

• The file containing your shared code is included in the content configuration space.
• You haven't modified the gridTemplateColumns property in the theme.