Question 290010 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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

    🙌


  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search