Hey guys New Here! Making my first block on the plugin (via source HTML from my Cwicly site). When I publish it and add it tot he page it is not formatted but it looks correct in Pinegrow Editor. I am using the HTML Version. I have updated teh images and the icons with a max width of 100%. Also, on the source site i had Tailwind Breakpoints set for mobile first so that could be part of the issue. Also, all I have done so far is Convert the Primary Container into a Block, published and added it to a test page. Thanks for your help!
First image shows what it looks like in the PG editor | Second on the front page | I checked to see if the breakpoints were reversed by checking the mobile view but it is still stacked and unformatted like the desktop view shown.
It could be that you don’t have the tailwind stylesheet attached. I just posted a video about the two most common problems I’ve seen and how to address them.
Adam to the rescue once again! Thanks so much. Im going to go try this. I didnt realize I needed to add the Style Sheets. Is that just when using Tailwind or if there are Tailwind elements on the code? I am really new to coding so please dont make fun of me! haha, you have to start somewhere.
Don’t worry about it. We all had to learn at one point.
And no, it’s not specific to Tailwind. Any CSS or scripts that you load for a block or theme needs to be enqueued (loaded), otherwise WordPress won’t know to apply them.
And just to head off the next question… there is active debate about whether you should have one stylesheet for all your custom blocks or use a single stylesheet for each block. Pinegrow supports doing it either way. From the plugin/theme settings you can specify whether you want to load them only on the pages where the blocks are loaded or load them site-wide (the default behavior).
Ok cool! so i found where the TW css style files are and where to put them. but I dont know how to put them. There is not a file icon like on yours…Not sure how to actually add them to the fields? I am on the plugin version so… see confusing graphic for more details, haha.
Ahh, right. The plugin doesn’t have a file browser. You just type it in e.g., tailwind_theme/tailwind.css (I’m not on computer so I apologize in advance if I got the path or filename wrong from memory.)
In the project tab, you’ll see the folders and files. Your red arrow points to that tab. I think the path is tailwind_theme/tailwind.css, but don’t quote me on that.
Welcome @ShannaKae! Seems you’re switching from the Cwicly debacle over to the Pinegrow world. Being patient with yourself is the key to finally learn Pinegrow for WP. Happy learning! It will be rewarded.
