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.

[AbdullahAhmadAAK]

My bad.
I did some digging around. In the new repo I made, I removed all the extra styles that were being added (keeping only the 3 @tailwind lines , and that fixed the problem. Adding them back in brought it back.

I have checked all of the styles being applied in the globals.css file and the line-clamp-3 class.

There doesn't seem to be any styles that override the default tailwind class's styles:

.line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

Anyways, here's the globals.css file contents:

/* B3 Fonts */
/* See https://docs.b3.fun/brand-kit for more information */
@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
    /* Moves up */
  }

  100% {
    transform: translateY(0);
    /* Moves back to original position */
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

@font-face {
  font-family: "Pack";
  src: url("https://cdn.b3.fun/fonts/pack.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal Bold";
  src:
    url("https://cdn.b3.fun/fonts/ppneuemontreal-bold-webfont.woff2") format("woff2"),
    url("https://cdn.b3.fun/fonts/ppneuemontreal-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Neue Montreal Regular";
  src:
    url("https://cdn.b3.fun/fonts/ppneuemontreal-regular-webfont.woff2") format("woff2"),
    url("https://cdn.b3.fun/fonts/ppneuemontreal-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Neue Montreal Book";
  src:
    url("https://cdn.b3.fun/fonts/ppneuemontreal-book-webfont.woff2") format("woff2"),
    url("https://cdn.b3.fun/fonts/ppneuemontreal-book-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Neue Montreal Medium";
  src:
    url("https://cdn.b3.fun/fonts/ppneuemontreal-medium-webfont.woff2") format("woff2"),
    url("https://cdn.b3.fun/fonts/ppneuemontreal-medium-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Neue Montreal Semibold";
  src:
    url("https://cdn.b3.fun/fonts/ppneuemontreal-semibold-webfont.woff2") format("woff2"),
    url("https://cdn.b3.fun/fonts/ppneuemontreal-semibold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Calibre Bold";
  src:
    url("https://cdn.b3.fun/fonts/calibre2-bold-webfont.woff2") format("woff2"),
    url("https://cdn.b3.fun/fonts/calibre2-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Calibre Heavy";
  src:
    url("https://cdn.b3.fun/fonts/calibre2-heavy-webfont.woff2") format("woff2"),
    url("https://cdn.b3.fun/fonts/calibre2-heavy-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Calibre Regular";
  src:
    url("https://cdn.b3.fun/fonts/calibre2-regular-webfont.woff2") format("woff2"),
    url("https://cdn.b3.fun/fonts/calibre2-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family: "Neue Montreal Book", Helvetica, sans-serif;
  letter-spacing: 0.05em;
}

body .font-medium {
  font-family: "Neue Montreal Medium", Helvetica, sans-serif;
}

body .font-semibold {
  font-family: "Neue Montreal Semibold", Helvetica, sans-serif;
}

body .font-bold {
  font-family: "Neue Montreal Bold", Helvetica, sans-serif;
}

@layer base {
  :root {
    --background: 0 0% 98%;
    /* #F9F9F9 */
    --background-highlight: 0 0% 100%;
    /* #FFFFFF */
    --foreground: 0 0% 15%;
    /* #272727 */
    --card: 0 0% 98%;
    /* #F9F9F9 */
    --card-foreground: 0 0% 15%;
    /* #272727 */
    --popover: 0 0% 98%;
    /* #F9F9F9 */
    --popover-foreground: 0 0% 15%;
    /* #272727 */
    --primary: 224 84% 57%;
    /* #3368EF */
    --primary-foreground: 0 0% 98%;
    /* #F9F9F9 */
    --secondary: 0 0% 96.1%;
    /* #F5F5F5 */
    --secondary-foreground: 0 0% 15%;
    /* #272727 */
    --muted: 0 0% 96.1%;
    /* #F5F5F5 */
    --muted-foreground: 0 0% 45.1%;
    /* #737373 */
    --accent: 0 0% 96.1%;
    /* #F5F5F5 */
    --accent-foreground: 0 0% 15%;
    /* #272727 */
    --destructive: 0 84.2% 60.2%;
    /* #EF4444 */
    --destructive-foreground: 0 0% 98%;
    /* #FAFAFA */
    --border: 0 0% 89.8%;
    /* #E5E5E5 */
    --input: 0 0% 89.8%;
    /* #E5E5E5 */
    --ring: 0 0% 3.9%;
    /* #0A0A0A */
    --chart-1: 224 84% 57%;
    /* #E65C41 */
    --chart-2: 217 100% 58%;
    /* #2A9D8F */
    --chart-3: 142 71% 45%;
    /* #22c55e - Green */
    --chart-4: 43 74% 66%;
    /* #F4D03F */
    --chart-5: 27 87% 67%;
    /* #F4A261 */
    --orbit-circle: 0 0% 15%;
    /* #272727 */
    --radius: 0.5rem;
  }

  .dark {
    --background: 0 0% 15%;
    /* #272727 */
    --background-highlight: 0 0% 20%;
    /* #333333 */
    --foreground: 0 0% 98%;
    /* #F9F9F9 */
    --card: 0 0% 15%;
    /* #272727 */
    --card-foreground: 0 0% 98%;
    /* #F9F9F9 */
    --popover: 0 0% 15%;
    /* #272727 */
    --popover-foreground: 0 0% 98%;
    /* #F9F9F9 */
    --primary: 224 84% 57%;
    /* #3368EF */
    --primary-foreground: 0 0% 98%;
    /* #F9F9F9 */
    --secondary: 0 0% 20%;
    /* slightly lighter than background */
    --secondary-foreground: 0 0% 98%;
    /* #F9F9F9 */
    --muted: 0 0% 20%;
    /* slightly lighter than background */
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 25%;
    --input: 0 0% 25%;
    --ring: 0 0% 83.1%;
    --chart-1: 224 84% 57%;
    --chart-2: 160 60% 45%;
    --chart-3: 142 71% 45%;
    /* #22c55e - Green */
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --orbit-circle: 0 0% 98%;
    /* #F9F9F9 */
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* Scroll progress tracking */
@supports (animation-timeline: scroll()) {
  @keyframes scroll-progress {
    from {
      --scroll-progress: 0;
    }

    to {
      --scroll-progress: 1;
    }
  }

  .sticky {
    animation: scroll-progress linear;
    animation-timeline: scroll();
  }
}

.b3-texture {
  background-image: url("https://cdn.b3.fun/b3-bg-texture.jpg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.b3-mask {
  clip-path: polygon(2.209% 8.111%,
      2.211% 8.08%,
      2.212% 8.05%,
      2.212% 8.05%,
      2.238% 7.434%,
      2.295% 6.861%,
      2.382% 6.331%,
      2.498% 5.841%,
      2.644% 5.39%,
      2.817% 4.976%,
      3.018% 4.598%,
      3.247% 4.255%,
      3.502% 3.943%,
      3.783% 3.664%,
      3.783% 3.664%,
      4.107% 3.401%,
      4.464% 3.165%,
      4.857% 2.956%,
      5.285% 2.774%,
      5.749% 2.62%,
      6.249% 2.493%,
      6.786% 2.394%,
      7.361% 2.323%,
      7.974% 2.28%,
      8.625% 2.266%,
      8.642% 2.266%,
      8.66% 2.265%,
      8.66% 2.265%,
      16.702% 1.748%,
      24.751% 1.345%,
      32.805% 1.053%,
      40.864% 0.872%,
      48.924% 0.801%,
      56.984% 0.836%,
      65.044% 0.977%,
      73.101% 1.223%,
      81.153% 1.571%,
      89.2% 2.02%,
      89.2% 2.02%,
      89.394% 2.037%,
      89.59% 2.052%,
      89.789% 2.067%,
      89.989% 2.08%,
      90.19% 2.093%,
      90.393% 2.105%,
      90.596% 2.117%,
      90.8% 2.128%,
      91.004% 2.139%,
      91.207% 2.15%,
      91.207% 2.15%,
      91.357% 2.158%,
      91.506% 2.166%,
      91.655% 2.174%,
      91.803% 2.182%,
      91.95% 2.19%,
      92.097% 2.199%,
      92.242% 2.208%,
      92.386% 2.217%,
      92.529% 2.227%,
      92.67% 2.237%,
      92.67% 2.237%,
      93.011% 2.264%,
      93.347% 2.294%,
      93.677% 2.329%,
      94.002% 2.369%,
      94.321% 2.414%,
      94.634% 2.466%,
      94.94% 2.525%,
      95.239% 2.592%,
      95.53% 2.667%,
      95.813% 2.751%,
      95.813% 2.751%,
      96.087% 2.844%,
      96.349% 2.947%,
      96.6% 3.059%,
      96.839% 3.181%,
      97.066% 3.314%,
      97.282% 3.457%,
      97.485% 3.612%,
      97.676% 3.779%,
      97.855% 3.957%,
      98.021% 4.148%,
      98.021% 4.148%,
      98.172% 4.349%,
      98.313% 4.567%,
      98.444% 4.802%,
      98.563% 5.057%,
      98.67% 5.332%,
      98.764% 5.628%,
      98.845% 5.947%,
      98.912% 6.289%,
      98.964% 6.656%,
      99.001% 7.048%,
      99.002% 7.052%,
      99.002% 7.056%,
      99.002% 7.056%,
      99.127% 8.717%,
      99.245% 10.378%,
      99.355% 12.04%,
      99.46% 13.703%,
      99.56% 15.367%,
      99.654% 17.032%,
      99.745% 18.697%,
      99.832% 20.363%,
      99.917% 22.029%,
      100% 23.696%,
      100% 23.696%,
      100.219% 29.737%,
      100.382% 35.779%,
      100.489% 41.822%,
      100.539% 47.865%,
      100.534% 53.909%,
      100.472% 59.953%,
      100.353% 65.996%,
      100.179% 72.037%,
      99.947% 78.077%,
      99.659% 84.114%,
      99.659% 84.114%,
      99.655% 84.186%,
      99.651% 84.259%,
      99.646% 84.331%,
      99.642% 84.404%,
      99.637% 84.476%,
      99.633% 84.549%,
      99.629% 84.621%,
      99.624% 84.693%,
      99.62% 84.766%,
      99.615% 84.838%,
      99.615% 84.838%,
      99.565% 85.657%,
      99.515% 86.476%,
      99.464% 87.294%,
      99.412% 88.111%,
      99.36% 88.929%,
      99.306% 89.746%,
      99.251% 90.562%,
      99.194% 91.378%,
      99.135% 92.194%,
      99.074% 93.01%,
      99.072% 93.031%,
      99.071% 93.052%,
      99.071% 93.052%,
      99.049% 93.479%,
      99.012% 93.894%,
      98.959% 94.296%,
      98.89% 94.686%,
      98.805% 95.062%,
      98.702% 95.422%,
      98.582% 95.768%,
      98.444% 96.096%,
      98.288% 96.408%,
      98.113% 96.701%,
      98.113% 96.701%,
      97.92% 96.974%,
      97.703% 97.232%,
      97.461% 97.475%,
      97.194% 97.699%,
      96.898% 97.904%,
      96.574% 98.088%,
      96.219% 98.249%,
      95.833% 98.385%,
      95.414% 98.495%,
      94.961% 98.577%,
      94.961% 98.577%,
      92.494% 98.801%,
      90.025% 98.998%,
      87.553% 99.171%,
      85.079% 99.324%,
      82.604% 99.46%,
      80.126% 99.58%,
      77.648% 99.689%,
      75.169% 99.79%,
      72.689% 99.884%,
      70.208% 99.975%,
      69.528% 100%,
      69.528% 100%,
      69.528% 100%,
      69.528% 100%,
      69.528% 100%,
      69.528% 100%,
      69.528% 100%,
      69.527% 100%,
      69.527% 100%,
      69.527% 100%,
      69.527% 100%,
      69.527% 100%,
      69.527% 100%,
      63.379% 100.153%,
      57.23% 100.245%,
      51.081% 100.277%,
      44.931% 100.248%,
      38.783% 100.158%,
      32.635% 100.006%,
      26.489% 99.792%,
      20.346% 99.515%,
      14.205% 99.176%,
      8.068% 98.774%,
      8.058% 98.773%,
      8.048% 98.773%,
      8.048% 98.773%,
      7.501% 98.746%,
      6.992% 98.698%,
      6.518% 98.63%,
      6.079% 98.545%,
      5.673% 98.441%,
      5.299% 98.321%,
      4.956% 98.186%,
      4.641% 98.036%,
      4.354% 97.873%,
      4.094% 97.697%,
      4.094% 97.697%,
      3.862% 97.513%,
      3.65% 97.317%,
      3.457% 97.108%,
      3.281% 96.887%,
      3.123% 96.654%,
      2.98% 96.409%,
      2.852% 96.152%,
      2.737% 95.884%,
      2.635% 95.605%,
      2.545% 95.314%,
      2.545% 95.314%,
      2.463% 95.004%,
      2.391% 94.682%,
      2.329% 94.349%,
      2.276% 94.006%,
      2.23% 93.651%,
      2.192% 93.286%,
      2.159% 92.911%,
      2.131% 92.525%,
      2.106% 92.129%,
      2.085% 91.722%,
      2.085% 91.722%,
      2.081% 91.635%,
      2.077% 91.548%,
      2.073% 91.46%,
      2.069% 91.371%,
      2.066% 91.282%,
      2.062% 91.193%,
      2.058% 91.103%,
      2.054% 91.013%,
      2.051% 90.923%,
      2.047% 90.832%,
      2.047% 90.832%,
      2.033% 90.503%,
      2.019% 90.171%,
      2.003% 89.835%,
      1.986% 89.496%,
      1.966% 89.156%,
      1.944% 88.814%,
      1.918% 88.471%,
      1.889% 88.127%,
      1.855% 87.785%,
      1.817% 87.443%,
      1.817% 87.443%,
      1.594% 83.762%,
      1.403% 80.079%,
      1.241% 76.394%,
      1.104% 72.707%,
      0.99% 69.019%,
      0.894% 65.329%,
      0.813% 61.638%,
      0.744% 57.946%,
      0.682% 54.254%,
      0.626% 50.561%,
      0.626% 50.561%,
      0.637% 49.992%,
      0.648% 49.423%,
      0.659% 48.854%,
      0.67% 48.286%,
      0.681% 47.717%,
      0.692% 47.148%,
      0.703% 46.58%,
      0.713% 46.011%,
      0.724% 45.443%,
      0.734% 44.874%,
      0.734% 44.874%,
      0.782% 42.326%,
      0.831% 39.779%,
      0.884% 37.232%,
      0.941% 34.685%,
      1.006% 32.14%,
      1.078% 29.595%,
      1.161% 27.051%,
      1.255% 24.508%,
      1.363% 21.965%,
      1.485% 19.424%,
      1.485% 19.424%,
      1.493% 19.294%,
      1.5% 19.165%,
      1.508% 19.035%,
      1.515% 18.906%,
      1.523% 18.776%,
      1.531% 18.647%,
      1.538% 18.517%,
      1.546% 18.388%,
      1.553% 18.258%,
      1.561% 18.129%,
      1.561% 18.129%,
      1.619% 17.124%,
      1.678% 16.121%,
      1.737% 15.118%,
      1.798% 14.116%,
      1.86% 13.114%,
      1.925% 12.113%,
      1.991% 11.112%,
      2.06% 10.111%,
      2.133% 9.111%,
      2.209% 8.111%);
}

.card-container {
  width: 100%;
  perspective: 1000px;
  transition: transform 0.3s ease-out;
}

.card-container:hover {
  transform: scale(1.02);
}

.nft-card {
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
  transform: translateZ(20px);
  transition: transform 0.3s ease-out;
}

.nft-card:hover {
  transform: translateZ(20px) rotateY(2deg) rotateX(2deg);
}

/* This is the part of the styles for the pixel art editor module */

:root {
  --header-height: 72px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  @apply fixed w-full;
  height: var(--full-height);
}

.custom-gradient {
  background: linear-gradient(232.7deg,
      rgba(105, 128, 252, 0.1) 4.3%,
      rgba(22, 72, 248, 0.1) 11.35%,
      rgba(255, 0, 0, 0.0776042) 30.99%,
      rgba(196, 196, 196, 0.1) 51.12%,
      rgba(213, 213, 213, 0.1) 57.67%,
      rgba(255, 255, 255, 0.1) 70.76%,
      rgba(82, 0, 255, 0.1) 91.4%);
}

.transparent-bg-pixel {
  background: #fff;
}

.transparent-bg-pixel::before,
.transparent-bg-pixel::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  @apply bg-gray-200;
}

.transparent-bg-pixel::before {
  top: 0;
  left: 0;
}

.transparent-bg-pixel::after {
  bottom: 0;
  right: 0;
}

.transparent-bg {
  background-image:
    linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
    linear-gradient(45deg, transparent 75%, var(--sl-color-neutral-300) 75%),
    linear-gradient(45deg, var(--sl-color-neutral-300) 25%, transparent 25%);
  background-size: 10px 10px;
  background-position:
    0 0,
    0 0,
    -5px -5px,
    5px 5px;
}

.transparent-bg-large {
  background-image:
    linear-gradient(45deg, rgb(255, 255, 255) 25%, transparent 26%),
    linear-gradient(-45deg, rgb(255, 255, 255) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgb(255, 255, 255) 75%),
    linear-gradient(-45deg,
      var(--sl-color-neutral-300) 75%,
      rgb(255, 255, 255) 75%);
  background-size: 20px 20px;
  background-position:
    0 0,
    0 10px,
    10px -10px,
    -10px 0;
}

.inner-border {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.focus-visible-style:focus-visible {
  outline: none;
  border-color: var(--sl-input-border-color-focus);
  box-shadow: var(--sl-focus-ring);
}

[wongjn]

Still seems to be working in this Tailwind Play with your global CSS. Consider providing a git repo that reproduces the unexpected behavior.

[AbdullahAhmadAAK]

Seems to be working now, but I didn't make any considerable changes. Not even to the globals.css file.

These are the classes that are working, but they weren't working before:
<p className="body-3 overflow-hidden line-clamp-3 text-ellipsis">{drawingDescription}</p>

To get them to work, I added the same line on another page as static content that would always be rendered. Maybe that solved the issue? But I've removed that line from that page and restarted the nextjs server, but still the fix is working. Really confused about how I got it to work lol.