Tailwind CLI Error: Cannot apply unknown utility class [Tailwind class]

[cbmtrx]

I'm doing my best to closely follow the instructions for the CLI install of Tailwind (OS X x64). I'm not really a programmer so when I encountered this error and couldn't solve it, a search brought me here.

I found this issue (closed) but it's not clear to me what the solution actually is:
#15778

My very basic input.css:

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

  body {
    @apply bg-[#f1f2f3];
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
    @apply text-gray-100;
  }

It chokes on text-gray-100 Aren't standard Tailwind classes part of the core styles? Basically, assets/input.css is not updating assets/output.css because Terminal keeps popping this error, so the styles never get applied. (I tested output.css and that works but I'm assuming you're not supposed to directly edit that)

Any help?

[wongjn]

Replace the v3 @tailwind directives with the v4 equivalent:

-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";

 body {

---

As an aside, 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

[cbmtrx]

Thanks @wongjn. Terminal throws Error: Invalid declaration: '-@tailwind base'

I confirmed it's v4.1.2 (Tailwind's CLI instructions are evidently still for v3)

FWIW when I first ran the downloaded executable i actually got a "damaged executable" OS X error and was advised to re-download. But the new download had the same problem. I eventually tracked down a solution, to use xattr -cr [app-name] which got it running.

Could Tailwind's actual download file be damaged?

[wongjn]

It seems like you copied verbatim the code I provided. However, it was a diff that shows changes you should make. So to be clear, the start of the file should be:

@import "tailwindcss";

  body {
    @apply bg-[#f1f2f3];
  }

[cbmtrx]

lol obviously I'm not up to scratch on this shorthand... That worked to get the CSS, THANK YOU.

edit Seems I'm still getting the Error: Invalid declaration: 'text-gray-100' in terminal. Any idea why?

edit 2 (no workaround as it turns out)

[cbmtrx]

Having said that, while terminal doesn't explicitly throw an error, inline classes like <button class="hover:[change something]"> don't work. I don't know if you get the same behavior.

[wongjn]

[change something] wouldn't be a valid arbitrary property class, since it is missing a colon and has a space in it. You'd do something like hover:[change:something] where change is the property and something would be the value.

[cbmtrx]

Yes I know that. I meant [change some class with this stuff in the brackets] like text-lg or text-xl

[wongjn]

Consider checking:

• You've rerun a Tailwind compile after adding a new class, or use the --watch flag to rerun when source files change.
• Your browser is requesting the most up-to-date version of the CSS file. There is a Disable cache in most browser developer tools. This is often found in the Network or similar tab.

[cbmtrx]

Yep, --watch has been active. Cache is already disabled. Kinda giving up on this and hard-coding stuff. Thanks for the help.