! important in @apply in CSS is wrongly formatted

[dicash]

I have the following CSS:

@layer components {
  .input {
    @apply placeholder:text-slate-400!;
  }
}

I have autoformat on save, and it reformats it to @apply placeholder:text-slate-400 !;, which is wrong line.

Also, in some reason it doesn't apply components layer in output, as if tailwind just disregards whatever I am trying to do here.
That's painful, please help.

[wongjn]

I have autoformat on save, and it reformats it to @apply placeholder:text-slate-400 !;, which is wrong line.

It would seem like perhaps your autoformatter doesn't understand Tailwind syntax. Consider contacting support for your autoformatter. Otherwise, consider writing styles without @apply:

@layer components {
  .input::placeholder {
    color: var(--color-slate-400) !important;
  }
}

Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://x.com/adamwathan/status/1890406016291938701

it doesn't apply components layer in output

Could you provide more details on what you mean please?

[dicash]

Thank you for reply @wongjn.
We have the following classes:

@theme {
  ...
  --text-desktop-h1: 70px;
  --text-desktop-h1--line-height: 0.95;
  --text-desktop-h1--font-weight: 450;
  --text-desktop-h1--letter-spacing: -0.02em;
  --text-mobile-h1: 36px;
  --text-mobile-h1--line-height: 0.95;
  --text-mobile-h1--font-weight: 450;
  --text-mobile-h1--letter-spacing: -0.02em;
  ...
}

@layer base {
  @apply text-slate-600;

  h1 {
    @apply text-mobile-h1 lg:text-desktop-h1;
    font-size: max(36px, min(7vw, 70px));
  }
  ...
}

@layer utilities {
  .text-h1 {
    @apply text-mobile-h1 lg:text-desktop-h1;
    font-size: max(36px, min(7vw, 70px));
  }
  ...
}

And somehow h1 is not applied, although I see the following in produces tailwind.css:

@layer base {
  color: var(--color-slate-600);
  h1 {
    font-size: var(--text-mobile-h1);
    line-height: var(--tw-leading, var(--text-mobile-h1--line-height));
    letter-spacing: var(--tw-tracking, var(--text-mobile-h1--letter-spacing));
    font-weight: var(--tw-font-weight, var(--text-mobile-h1--font-weight));
    @media (width >= 64rem) {
      font-size: var(--text-desktop-h1);
      line-height: var(--tw-leading, var(--text-desktop-h1--line-height));
      letter-spacing: var(--tw-tracking, var(--text-desktop-h1--letter-spacing));
      font-weight: var(--tw-font-weight, var(--text-desktop-h1--font-weight));
    }
    font-size: max(36px, min(7vw, 70px));
  }

[wongjn]

Remove the @apply that is the immediate "child" of @layer base. This is invalid CSS and interferes with the selector of the h1 rule:

 @layer base {
-  @apply text-slate-600;
-
   h1 {
     @apply text-mobile-h1 lg:text-desktop-h1;
 }

[dicash]

Thanks for your help, it worked indeed.

But then we have

@layer components {
  .input {
    @apply ... placeholder:text-slate-400;
  }
}

and somehow placeholder:text-slate-400 doesn't get applied without important flag !, which is problematic to set.
If we move .input outside of components it works as expected. I can't detect where's that :placeholder override coming from, I don't see any styles that might be responsible for that in generated tailwind output.

[wongjn]

Consider using developer tools to inspected applied CSS rules to see what could be overriding. Otherwise, consider writing styles without @apply:

@layer components {
  .input::placeholder {
    color: var(--color-slate-400) !important;
  }
}

[dicash]

There doesn't seem to be a way to debug :placeholder in devtools, but you're right, it's something Chrome-specific. Same style works properly in Safari. Thanks for the help again.