Tailwind CSS File Watcher
I want to setup a File Watcher to process my CSS with Tailwind CSS. I was using CodeKit for the last 5 years, but it doesn't work with my iCloud files. So I need to switch and had a first look at File Watchers. But I don't have any luck to configure it properly.
At the moment I tried several options, but couldn't even figure if the file watcher even works :-/
Can anybody point me directions what to fill in the fields?
Edit: image not uploading … here is a link
Please sign in to leave a comment.
I'd suggest changing the watcher as follows:
Note that the
$FilePath$
expands to a full file path, including name, so appending$FileName$
to it results in wrong path; also, you need to make sure to specify both the working directory and output paths to refreshI'd also suggest installing
tailwindcss
globally instead of usingnpx
, this will likely increase the processing speedHey Elena
Thanks, quick and good answer. I have put in the settings like in your screenshot, but when I save (changed something before) nothing happens. No error, no message or anything. And nowhere a main.2.css.
Have installed tailwindcss with brew :-) Didn't know it is existing for a couple of years 😁 Thanks for the tip
https://share.cleanshot.com/9gmypPyj
BTW: I am on macOS 14 and PhpStorm 2023.2
Please try specifying a full path to
tailwindcss
binary instead of justtailwindcss
in the program field - does it help? also, you seem to have an extra whitespace in$ProjectFileDir$
macro - it has to be$ProjectFileDir$
and not$ ProjectFileDir$
Yeah, there was a white space accidentally. But didn't help either. Still, nothing happens on save.
Did select the working dir without a variable, but still nothing. When I run it from the terminal like
it works fine, though.
Did you try specifying a full path to
tailwindcss
binary instead of justtailwindcss
in the Program field? Also, please try setting the Show console: to Always to get it opened when the watcher is triggered -what is the result?Yeah, I have the full path to tailwindcss (same I can successfully process from terminal) and Show console enabled.
https://share.cleanshot.com/c3VGwj1V
please try enabling debug logging for
#com.intellij.plugins.watcher
category (via Help | Diagnostic Tools | Debug Log Settings...), shut down the IDE, remove the~/Library/Logs/JetBrains/PhpStorm2023.2
folder, restart, recreate the issue and share thelog
folder zipped along with a video recording of your stepsThe file type (Cascading File Sheet) is wrong. The change happens in a filetype of .html or .php dependent on your dev environment. You want to see changes there, and then on that basis actualize your css file. Example below is working for me.
Example: tailwindcss -i $ProjectFileDir$/src/css/style.css -o $ProjectFileDir$/public/css/style.css
astro … kind of makes sens. But I have quite some styles in the CSS file as well. I need to process on CSS file changes as well.
samnet it works for me using the Cascading File Sheet type; please could you share the logs/video I asked for?
Thanks, needed time to record. Strangely, after I restarted PS it worked fine. Got an error at first, but due to some mistake I made earlier. Console showed up, I fixed it and it is working fine now :-)
Many thanks for your help!
Just another question. What is your advice when I need multiple files to be watched. I want the CSS to be process when I change my CSS file and when I edit my PHP/HTML files. Two file watchers? Oder just select “Any” as file type?
You can create 2 files watchers, or use Any type in combination with scopes: create a new scope that only includes PHP, HTML and CSS files in Settings | Appearance & Behavior | Scopes, then choose this scope in your file watcher preferences