(BUG?) Native MacOS arm bin not working on a clean project

[AlexK-TUES]

Hello. I am not sure if this is a confirmed bug or a just my stupidity, therefore labeling this as a help post. It's been some time lately since I have used Tailwind, and never the native bin with rust, only the CDN and plain HTML, so I am a bit far from understanding all perfectly.

For a homework of mine I have decided to play around with Yew with the inclusion of Tailwind CSS. While trying to test if all of my configurations are working, I found an interesting behavior - my CSS wasn't loading. To my belief the bin did not convert some/most of the classes other than some base ones, and that lead to the lack of rendering. Curious if this is a problem with the binary provided with the installation of the tailwind-yew crate, I grabbed the "tailwindcss-macos-arm64" bin from the latest 4.1.18 release, added it to my folder, chmod +x -ed it and ran it with my simple input.css and output.css files. To my surprise, macos said that the binary is "damaged and can not be opened". I have tried downloading it again in case of corruption, same result. Using the CDN, as I have done before, everything is fine and working.

Could somebody point me to what I am missing with using the binary option? I am ready to provide logs and whatever else you may need if this is a technical problem, though I suspect it's a problem of me being an idiot and making an obvious mistake.

[SilenLoc]

Binary

I grabbed the "tailwindcss-macos-arm64" bin from the latest 4.1.18 release, added it to my folder, chmod +x -ed it and ran it with my simple input.css and output.css files. To my surprise, macos said that the binary is "damaged and can not be opened". I have tried downloading it again in case of corruption, same result. Using the CDN, as I have done before, everything is fine and working.

@AlexK-TUES can you give me the exact output of: "damaged and can not be opened"?

I assume it said more than that. What can happen is that the correct security settings also need to be set. Depends on your settings.

The yew support crate you use seems to be just downloading the correct binary for you and then run it. See this file of the crate, so just try to do the same as this crate does but manually, or even copy it from where it is downloading it into. Maybe you can also inspect it too see what the difference is between that one and yours.

CSS not loading

For a homework of mine I have decided to play around with Yew with the inclusion of Tailwind CSS. While trying to test if all of my configurations are working, I found an interesting behavior - my CSS wasn't loading. To my belief the bin did not convert some/most of the classes other than some base ones, and that lead to the lack of rendering.

Hearing "css not loading" leads me to this question: are you using tailwind v3 classes that might be called different in tailwind v4?

If you are using version 4:
Sometimes tailwind can not read all classes, this is why you might want to safe list those that are not applied: https://tailwindcss.com/docs/detecting-classes-in-source-files#safelisting-specific-utilities

Being an idiot

Could somebody point me to what I am missing with using the binary option? I am ready to provide logs and whatever else you may need if this is a technical problem, though I suspect it's a problem of me being an idiot and making an obvious mistake.

Well you did as you were told:

https://tailwindcss.com/docs/installation/tailwind-cli

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. The CLI is also available as a standalone executable if you want to use it without installing Node.js.

You could try to do the same with an older binary and see if it actually has to do with the binary or your file/security settings.

[AlexK-TUES]

Thanks for the fast reply. I am attaching a photo of the message.

A friend of mine says it's standard for unsigned binaries on macOS and there should be a way to circumvent permissions for that, so just as you said, a permissions issue—I will see if that's it. Frankly it sounds stupid (and that's macOS's fault, not the teams—they are doing a great job!), but I wouldn't know if that's correct, as I don't use my Mac for dev work mostly, only my Thinkpad on Linux.

I also thought tailwind-yew just pulls the binary and renames it, but still, I wanted to come to source to be sure.

For the "CSS not loading", I was doing a sanity check of just changing the color of some text in a heading. That didn't work (nor any other CSS markup), but forcing the background color of the body to red in input.css did work, strangely enough.

Also, only the binary built from source gets the message—the one from tailwind-yew does not (though it still doesn't fully function as expected). I am using v4 and with very simple predefined classes, nothing custom or crazy.

[SilenLoc]

A friend of mine says it's standard for unsigned binaries on macOS and there should be a way to circumvent permissions for that, so just as you said, a permissions issue—I will see if that's it. Frankly it sounds stupid (and that's macOS's fault, not the teams—they are doing a great job!), but I wouldn't know if that's correct, as I don't use my Mac for dev work mostly, only my Thinkpad on Linux.

Yes that was my suspicion... and that is the screen shot I wanted to see :) I am also used to linux where if you tell it what to do with a file, it does it... but on the macos... other story...

I also thought tailwind-yew just pulls the binary and renames it, but still, I wanted to come to source to be sure.

Of course.

For the "CSS not loading", I was doing a sanity check of just changing the color of some text in a heading. That didn't work (nor any other CSS markup), but forcing the background color of the body to red in input.css did work, strangely enough.

Also, only the binary built from source gets the message—the one from tailwind-yew does not (though it still doesn't fully function as expected). I am using v4 and with very simple predefined classes, nothing custom or crazy.

I am not 100 percent sure what you mean here: you change the tailwind classes in the input.css to expect a certain behavior?

1. In that case you might want to look at: https://tailwindcss.com/docs/styling-with-utility-classes#using-custom-css

2. I am not familiar with your experience in Web Dev but be aware that you should disable cache in the browser for you site to be sure. It seems this is not the case because some things have effect.

3. Be sure that you are not including on top the file from the CDN :) Just in general annoying...

4. Check the output.css file (or however you named it) to see if the CSS you added is present or not. If not... check if it is actually writing the file to the right place, or you look at an old one. If it is present: look at point 2 then at point 5.

5. If you are talking about just normal custom CSS. Check in your dev tools what is applied and see if anything is overwritten, you can of course name your custom class for testing: special-class-123 and apply it to an element and then search.
   See inside of github:

I have no idea what your level of web dev is, so I assume mistakes that happen to me a lot around CSS (and sometimes still today ;))

There is nothing that you wrote that indicates to me something obvious to do with tailwind but more with loading and overwriting the CSS.

[b3nten]

I'm also having this problem. Tried both arm64 and x64.

[b3nten]

It is indeed a permissions issue

cd /path/to/the/binary
xattr -l tailwindcss-macos-arm64
xattr -d com.apple.quarantine tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
./tailwindcss-macos-arm64 --help

this works fine

[rozsazoltan]

Maybe could use jdx/mise?