CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Felipe Ossandon
Felipe Ossandon

Reputation: 43

Tailwind CSS grid span (unexpected behavior)

I'm trying to do this in my Next.js project: https://play.tailwindcss.com/coz07Km10V

But the result is different, is pushing the block idk why, here's the reproduction: https://codesandbox.io/p/devbox/distracted-ben-53gsl4?file=%2Fapp%2Fpage.tsx%3A1%2C14

It seems that Next.js overwrite or change the native behavior of that grid property. Any ideas?

Upvotes: 1

Views: 341

Answers (3)

Felipe Ossandon
Felipe Ossandon

Reputation: 43

I got a response from Wongjn (tailwind contributor):

in HTML (i.e. the Tailwind Play) does not mean as it does in React – it behaves as an open tag only, .

Thus, to make the equivalent of the CodeSandbox project in Tailwind Play: https://play.tailwindcss.com/gGtlBynuCo

Or to make the equivalent of the Tailwind Play in the CodeSandbox: https://codesandbox.io/p/devbox/https-github-com-tailwindlabs-tailwindcss-discussions-12461-7nwt8f?file=%2Fapp%2Fpage.tsx%3A6%2C11

🙌

Upvotes: 0

Mepadev
Mepadev

Reputation: 61

In HTML doesn't exist the concept of Div self-closed tag:

"In XML, would be a self-closing div, but not in HTML. In HTML, doesn't self-close because "div" isn't on the list of elements that can never have children."

So to correct your code, you will need to use other techniques, like using Absolute and col-start:

export default function Home() {
  return (
    <div className="bg-protop-lavander h-[400px]">
      <div className="grid auto-rows-[370px] grid-cols-4">
        <div className="col-span-2 col-start-1 col-end-4 bg-green-500" />
        <div className="absolute col-span-2 col-start-1 col-end-4">
          <img
            className="block object-cover opacity-50 h-[370px] w-full"
            src="https://images.unsplash.com/photo-1568092806323-8ec13dfa9b92?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
            alt="eg"
          />
        </div>
      </div>
    </div>
  );
}

Upvotes: 0

ycz6
ycz6

Reputation: 141

I think it's actually the Tailwind playground that's broken here - if I replace <div class="col-span-2 bg-purple-500"/> with <div class="col-span-2 bg-purple-500"></div> then the two examples behave the same: https://play.tailwindcss.com/gGtlBynuCo It just coincidentally happens to be broken in a way that the final output is what you wanted 😅

To fix it, you'll want to put the img inside the first grid element instead, like so: https://play.tailwindcss.com/Vd4vDz1SuM

Your method doesn't work because col-span-2 makes the element occupy two columns in the grid layout, but doesn't affect which columns it occupies - those are still assigned from left to right. In other words, the first div will occupy columns 1 and 2 of the grid, and the second occupies columns 3 and 4.

Upvotes: 0

Related Questions