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

https://dsc.cloud/40757e/pb-sVmPLSEvcn.png

0
12 comments

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 refresh

 

I'd also suggest installing tailwindcss globally instead of using npx, this will likely increase the processing speed

0

Hey 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

0

Please try specifying a full path to tailwindcss binary instead of just tailwindcss 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$

0

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

tailwindcss -i ./source/css/main.css -o ./source/css/main_test.css

it works fine, though.

0

Did you try specifying a full path to tailwindcss binary instead of just tailwindcss 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?

0

Yeah, I have the full path to tailwindcss (same I can successfully process from terminal) and Show console enabled.

https://share.cleanshot.com/c3VGwj1V

0

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 the log folder zipped along with a video recording of your steps

0

The 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 

0

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.

0

samnet it works for me using the Cascading File Sheet type; please could you share the logs/video I asked for?

0

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?

0

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

0

Please sign in to leave a comment.