uliverse

I see... Makes sense. I just followed the instructions in the tailwind docs... This is all new to me. 😄

I think I have to give up on exec at this point, this is way over my head... The problem seems to be that the exec function can't be called in my MAMP environment, not even when I add the full path to the npm script. However I found that tailwind comes with a "--watch" command to monitor any changes. And this works! I guess only until the console is closed, but better than manually initiating the build command with every change... I run a command like this: npx tailwindcss -i ./input.css -o ./site/templates/bundle/tailwind.css --watch The input.css looks like this: @tailwind base; @tailwind components; @tailwind utilities; I'm sure I totally messed up your setup, but it seems to work. I was also wondering if the standalone CLI might not be easier to install for most people on shared hosting...

Well, I did some more testing and found that the exec function is actually available. I added this code to my page: <?php $function_name = "exec"; if ( function_exists($function_name) ) { echo "$function_name is enabled"; } else { echo "$function_name is not enabled"; } ?> As you can see on the screenshot, the result is positive... Don't get me wrong: I am not trying to ask for your help in my specific case. I believe in your product and I want to help make it usable for as many people as possible!

Thank you, @bernhard! Too bad... I will try to figure out why exec is not working in MAMP...

I have changed the livereload.php, but the result is the same. In Tracy I get array (0)

I cleared the database and re-installed everything (local MAMP installation), but the problem persists. I am going the traditional way: download Processwire, download SiteRockfrontend, move the site-rockfrontend folder into the root folder and install PW with Rockfrontend as site profile. Then run "npm install -D" in the root folder of the project. My installation looks like the screenshot now. The relevant part of livereload.php looks like this: if (!defined('PROCESSWIRE')) die(); // early exit if not in debug mode or livereload is not enabled if (!wire()->config->debug) return; if (!wire()->config->livereload) return; // run npm build to compile css from tailwind exec('npm run build'); The fronend is reloading after a file change, but the tailwind.css is not being recreated. If I manually execute "npm run build" it works. Is it possible, that the exec command is run in the site subfolder and therefore not working correctly? About the topbar: the path to the topbar.css is not correct:

Nice work! Tailwind is installing correctly now. Only the Topbar still gives me trouble, since the topbar.css is also not linked correctly. This is a minor issue, since the fronend editing module is not essential. But still... I noticed that tailwind.css is only generated ONCE. When I change the main.latte template again (to "bg-green-500" p.e.) the css file is not re-created... Is there anything I need to enable for the tailwind.js to work correctly?

😝 Sorry to be the messenger of bad news... I am glad it was not due to my stupidity... Again - thank you for making this available. Your contributions make PW more accessible to ordinary people like me! 😂

So I managed to install the npm packages in the root folder of my project (I guess this is where "site" and "wire" also live). However, the topbar.min.css is not loading and the H1 is not turning red. I found that the path to the topbar.min.css is not correct: /pwrockfrontend/pwrockfrontend/site/modules/RockFrontend/topbar/topbar.min.css instead of /pwrockfrontend/site/modules/RockFrontend/topbar/topbar.min.css

Thank you. Helpful tutorial.

Hi Bernhard. Thanks for creating this. I managed to install the profile and I get the welcome screen. Where I get stuck is the command line instruction... Currently I am on a local machine (MacOS / MAMP) and I have no idea how I would go about this, to be honest...

Very cool! I just found this module and tried the demo. I am amazed how well it already works! Wow!! This could definitely be a game changer for some because it brings so much design flexibility to PW (of course the purists among us cringe inside ?). I have been hoping for some solution like this and will definitely look into it more. Thank you for sharing!

No, the caching is definitely server side.

Hi. In my template I call images the standard way ($image = $event_item->page_image->size(640, 480, $options); $options are defined as well in the template, of course. Caching is enabled for the template in use. On desktop this works normally. But on mobile browsers I get strange behaviour: after changing an image on a page, the new image shows up on desktop, but not on mobile. Only after clearing cache (PageRender module) the correct image shows up...

Ah... thank you. That at least takes care of the errors... not quite there, but closer... Still confused about the PW syntax ?