line-clamp-3 not being applied on conditional rendering

[AbdullahAhmadAAK]

What version of Tailwind CSS are you using?

"tailwindcss": "^3.4.1",

"tailwind-merge": "^2.6.0",
"tailwind-scrollbar-hide": "^2.0.0",
"tailwindcss-animate": "^1.0.7",

What build tool (or framework if it abstracts the build tool) are you using?

"next": "^15.2.4",

What version of Node.js are you using?

"@types/node": "^20",

What browser are you using?

Chrome Version 136.0.7103.93

What operating system are you using?

Windows 10

Reproduction URL

see the issue here

Describe your issue

I am trying to have this clamped at 3 lines, but it's not working. The tailwind class definition does show up in inspect element mode, so it is not an issue of tailwind classes being purged. I am using a recent version of tailwind which already has the line clamp plugin being used by default.

 <div className="flex flex-col gap-3 py-3 px-4 text-[#24272D] border-b-[1px] border-custom-neutral-100">
                <div className="flex items-center gap-1">
                    <span className="flex-1 title-2">{drawingName}</span>
                    <Button variant={'minimal'} size={'minimal'} onClick={() => setShow(true)}>
                        <Pencil width={16} height={16} className="text-[#24272D]" />
                    </Button>
                </div>
                <p className="body-3 line-clamp-3">{drawingDescription}</p>
            </div>

My editor page's page.tsx file has this, where the snippet above can be found within PixelArtEditorClientComponent:

return (
    // The main container takes up the full viewport width and height
    <main className="flex w-[100vw] h-[100vh]">

      {userData.userIdentifier.length === 0 ? (
        <AnonUserView displayText="User unauthenticated. Please sign in." />
      ) : (
        <ReadOnlyRoom>
          {/* Client-side component that renders the pixel art editor */}
          <PixelArtEditorClientComponent />
        </ReadOnlyRoom>
      )}

    </main >
  );

[wongjn]

In the Tailwind Play at least, you'd want to use class, not className: https://play.tailwindcss.com/xwoxp96iIX?size=322x773. For your real project, consider providing a git repo that reproduces the unexpected behavior.