Tailwind CSS

Hey Andrei,

Thanks for sharing these tips to our Windows friends :) I like your performance boost also, sounds great!

Cheers!

Hey @sfr

That's a great question. I think you can do what they say in this post https://github.com/dunglas/symfony-docker/issues/475#issuecomment-3634160207
define the command in the tailwind container

Cheers~

Thanks @Symio!

I think the init command should bootstrap you correctly based on which version of tailwind you have. However our code download for the course has the v3 init code: so if you update to a v4 in symfonycasts_tailwind.yaml, you'll have issues.

I appreciate your comment.

Cheers!

Hey Skribe,

That's fine. You only need to update caniuse-lite if it's actually causing you troubles, otherwise, just ignore it.

To update it, you can run yarn update-browserslist-db --update

Cheers!

Hey Simston!

Sorry for my super late reply, I missed your message somehow. Perhaps you already solved your problem but here's a list of things you can try (I got it from ChatGPT, but went through it and looks good to me)

1. Install the Tailwind CSS plugin

   • Go to Preferences (macOS) or Settings (Windows/Linux)
   • Navigate to Plugins
   • Search for Tailwind CSS and install the JetBrains plugin (official).
   • Restart PHPStorm if prompted.

2. Enable Tailwind CSS for your project
   After plugin installation:

• Go to Preferences / Settings → Languages & Frameworks → Tailwind CSS
• Click the "+" to add a new configuration
• Point it to your tailwind.config.js file
• PHPStorm will automatically detect the version and config

1. Associate .twig files with HTML (optional but helpful)
   • Go to Preferences / Settings → Editor → File Types
   • Find Twig under Recognized File Types
   • Make sure .twig is in the list of patterns (it usually is)
   • Then scroll down to HTML and add a new pattern like *.twig so PHPStorm treats Twig templates like HTML (this can improve class detection)

⚠️ Warning: this step may cause false positives or issues with Twig-specific syntax, so use it only if you're okay with treating Twig as HTML.

I hope it helps. Cheers!

Hey @John-S,

Read that symfony doesn't currently support tailwind 4.*

Tailwind 4 support is coming soon: https://github.com/SymfonyCasts/tailwind-bundle/pull/91

How do I uninstall any particular(bundle,package, or whatever they are called) from my project ?

composer remove the/package removes the actual package but there might be some things left - each bundle is different. You may need to manually remove the bundle and config. In the case of tailwind-bundle, you'd need to remove some stuff from your css file.

Hey Ondrej,

It's difficult to say for me because I don't use Windows.. but it should work on Windows as well. Probably some problems specific to your computer. I would recommend you try to install the Tailwind yourself and try its binary to see it works well. Then just point the bundle to the binary you installed, see the docs how to do it: https://symfony.com/bundles/TailwindBundle/current/index.html#using-a-different-binary

It's more like a workaround, but I hope that helps this way.

Cheers!

I tried the "Using a different binary", but no matter I write to the config it seems it doesn't matter. Like the error fires up before even get there.
I did some debugging to see, where it happens and it's right here:
\Symfonycasts\TailwindBundle\Command\TailwindInitCommand::createTailwindConfig on line 61

$process->wait(function ($type, $buffer) use ($io) {
    $io->write($buffer);
});

When I go to the wait function \Symfony\Component\Process\Process::wait it happens right in the do/while block on the line 453.
The error triggers the code $this->readPipes($running, '\\' !== \DIRECTORY_SEPARATOR || !$running);, not the previous ones.
But funny is - the code gets to the readPipes method, can run twice and after that it shows the error. It's like the system doesn't min the method itself, but rather the fact it runs in cycles and stops it after a while.

Can you see something suspicious there?

Hey Ondrej,

Hm, really not sure... It sounds like you're having trouble with the binary on your computer. The best option would be to try to google how to install Tailwind correctly on your specific platform. After you install it properly - try to run the installed binary directly. The idea is if that will work for your platform directly, it should also work for you with the bundle.

Cheers!

Ok I think a solved the problem. It was actually two problems, one hiding behind the other one.
All the Windows errors "This app can't run on your computer" was because when the commands tried to run the tailwind client in var/tailwind/v3.4.17 , they actually tried to run an exe file with zero size. Just an empty file. And for some reason in Windows the error looks like that.

So what was the original problem? Why was there such a broken file?
When I initially run the tailwind:init , my "awesome" antivir AvastOne was so eager to make false/positive detection, it apparently blocked downloading the file in this most terrible way - not saying anything a creating the file but empty. I actually had more problems with the Avast in last days - I had to whitelist all urls important for devs, like github, packagist etc, because I wasn't even able to run normal composer install command.

The funny thing was, that I of course tried to turn of the antivir and even uninstall it, but every time I tried your steps from the beginning, the tailwind:init never tried to override the broken cli. It just checked it's there and thought "Ok, I'll just use it".
I finally tried to delete all the files and now, the init command worked because new antivir didn't the downloading.

So I just wanted to describe it and maybe help someone in the future.
The most funny thing? I don't even wanna use Tailwind, I don't like the way it work and I prefer clean HTML structure and I was able to easily continue the lessons without it :D

But thank you Victor for your effort.

Hi Ondrej-Vasicek. I've been facing the same This app can't run on your PC error when I try to run php bin/console tailwind:build command. So I'd kindly like to know how did you solve this issue.

Hi, I've described it in the previous post - in a nutshell - antivir program blocked creating proper exe file and created only empty file. When executing empty file, Windows has this error message. So the solution was to (unfortunately) change my antivir and start the proces over again, so the exe file was created/downloaded again properly. More info in the previous post.

Hey Ondrej,

Happy to hear you found the problem! Yeah, that makes sense, the bundle does not override if the file exists and no any sum checks on the existent file for some performance reasons. So you just need to manually drop that corrupted file.

Thanks for sharing the solution with others, I think most Windows users may face this problem, so it should be useful to them for sure.

Cheers!

Just ran into the same issue with Windows Defender (1.1.25080.5) on Windows 10 22H2 with PHP 8.4, Symfony 7.3 and TailwindCSS 4.

Temporary solution
Removing the bundle via composer, disabling Defender and reinstalling the bundle, and running init again and then the build command "fixed it for now." What I noticed was that the init command didn't download the executable, but the build command did.

I saw there is a closed issue [98] on this in the GitHub repository with a "fix." But as this at least partially is playing into antivirus behavior, it seems like it should be looked into further, my assumption out of the blue is that Defender (and probably other AVs too) doesn't want to play nice with downloading the executable here for some reason (a common way of backloading malware), and that then results in the 0-byte file, which throws the SmartScreen error when it's attempted to be executed with the build command. If that would be the case, my guess is that downloadExecutable() is to blame, but I sadly don't have a "permanent fix" for this issue.

Hey Taminoful,

Thanks for sharing your working solution with others! Hm, indeed some antiviruses may case issues with downloading executable, probably depends on the antivirus config. I'm not sure if we can do much with it, moreover I'm not on wondows so it's harder to reproduce for me. But if you say it creates an empty file - that may lead to not clear error I suppose. I'm not sure if we should check the file size and throw if it's empty, not sure if there's a better way to check for file corruption in this case. If you have some ideas how to improve or make the process more robust - please, feel free to send a PR or open an issue to discuss first.

Cheers!

Hey there Victor,

I've gone ahead and opened an issue for discussing potential fixes for this issue, recapping the situation on the repo now. I'll help out and brainstorm solutions as much as my time allows me to, went ahead and proposed some solutions in there too.

Happy to help! :)

Hey Taminoful,

Awesome, thanks for opening the issue on it! And thanks for helping with brainstorming the solutions ❤️

Cheers!

For anyone still reading down this far, this is what I had to do to resolve the "PC cannot run app" error when I ran the command "php bin/console tailwind:build -w". As described by "Ondrej-Vasicek" my Windows11 Defender blocked the download in the most unhelpful way and ".exe" file was size 0kbs. When I ran the build command with the additional flag "-v" I could see the url for the file that was "blocked" as "https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.11/tailwindcss-windows-x64.exe " (Your url may be different depending on your tailwind version)
I put this into my browser (chrome) and the exe was downloaded without an issue. No idea why.
I then put the downloaded exe into the directory "[project_name]/var/tailwind/v[version_number]/". You many need to delete or replace the empty exe if it is still there. I was able to continue the tutorial from there.
Hope this helps.

Note that I did try a few ways to disable/work-around Win11 Defender but they did not help me.

Hey Ben,

Thanks for sharing your solution. Yeah, it's weird that the file is not blocked when you download it from the browser, probably some trustworthy user interaction, I'm not sure. Well, as always, Windows has its own quirks :)

Cheers!

Hey Lemin,

How does your .symfony.local.yaml config file look like? As an alternative solution, you can comment out that Tailwind command in .symfony.local.yaml and instead run it in a separate console tab to make sure it works this way. Also, what OS are you on?

Cheers!

Hi Victor, I tried to run the command in a separate Windows terminal tab at first, but as I add classes it doesn't seem to track class changes in twigs templates, and nothing takes effect on the browser . I'm using Windows 10.

Hey Lemin,

Hm, probably a known issue, if you add that class in a CSS file that you include in the main CSS file, IIRC files including may not work well. Could you try to add that CSS class directly in the main CSS file which is app.css I suppose? Will it work for you?

Cheers!

Hi Victor. I can now see it seems to work for all templates except the 'homepage.html.twig' which is being rendered by Main controller:: homepage action.

Hey Lemin,

Hm, make sure you don't override any stylesheet blocks in your homepage.hrml.twig. In theory, if it works in other templates but doesn't in one - then most probably you either have some inconsistency in your code for that page, worth double-checking... or it might be a browser cache problem, try to open Chrome's dev toolbar and do a hard reload of the page, in most cases it should help.

Cheers!

Finally solved. The error in render() rendering homepage.thml.twig instead of homepage.html.twig.

Thank Victor

Hey Lemin,

Great, glad to hear you nailed it :)

Cheers!

Hey @Himanshu ,

Probably a temporary network issue in your region? Does the GitHub website work well for you? Could you open that https://github.com/tailwindlabs/tailwindcss/releases/download/v3.4.17/tailwindcss-windows-x64.exe link in your browser? Does it download the file for you? If it works - could you try again?

Cheers!

Working successfully :)

Hey Himanshu,

Awesome, thanks for confirming it worked eventually :)

Cheers!

Hey John,

I personally don't use VS code so can't help you much on it. I see you're on Windows OS and sue XAMPP, could you make sure the XAMPP is started and working? Maybe try to reload it.

Also, the error "spawn /usr/bin/php ENOENT" usually indicates that the system is unable to find PHP at the specified path (/usr/bin/php), which could be due to a misconfiguration in your environment. Please, make sure the path you're using to the PHP is correct. There are a few commands that may help you to debug it:

symfony local:php:refresh
symfony local:php:list

Probably you need to refresh your PHP versions first, and then make sure the list command shown the correct path to the correct PHP.

Also, check your .vscode/settings.json to make sure there are no path to the invalid PHP binary, fix the path if needed. IIRC it should be something like php.executablePath config parameter there.

I hope that helps!

Cheers!

Hey Jake!

Your totally right: it's because the node_modules isn't there, which is really annoying! I think that I'm getting some autocompletion in PhpStorm simply because it recognizes me using Tailwind classes (and maybe it sees my tailwind.config.js. But I don't think I've done anything extra! Here's some info on this topic: https://github.com/SymfonyCasts/tailwind-bundle/issues/28 including a link to the issue for PhpStorm where you can upvote!

You can also install Tailwind via npm just to get the autocompletion. Annoying, but functional.

Cheers!

Just a follow up question. I am planning to use daisyui components. With the asset mapper, the only way I found sane is to use a custom standalone tailwind cli with prepackaged daisyui. Is there a way to take advantage of this binary when installing tailwindcss using the symfonycasts bundle? For now I replaced the binary manually inside folder var/tailwind/3.x.x/

https://github.com/dobicinaitis/tailwind-cli-extra/releases

Thanks in advance 🙏🙏🙏🙏🙏🙏🙏🙏

Hey @Jake!

I'm pretty sure this is possible! You'd need to manually download that binary and have the tailwind bundle point to it (instead of its default). See https://symfony.com/bundles/TailwindBundle/current/index.html#using-a-different-binary for how to configure that.

I'm curious to see if that would work so let us know!

Works like a charm! thank you.

Thanks Ryan! I did just that. Annoying but it works! But frustrating when it didn't work.

npm install -D tailwindcss

Hey Ruslan,

TailwindCSS itself does not include a built-in live reloading feature, but I think you can easily set up live reloading using development tools commonly used with TailwindCSS. Live reloading is typically handled by tools like Webpack or Vite, though I have never done it before, so not sure about the exact code.

I hope that helps!

Cheers!

Hey HardWare,

There's a "Tailwind CSS" PhpStorm plugin, I bet if you install that - you will have auto-completion for all Tailwind CSS classes, not only those you've used before in the project :)

Cheers!