Hi,
Maybe this is intentionnal, because you couldn’t find any other way, but it appears that when you use the design panel (add-on tailwindcss) and use it to insert some images into the page, using the :before trick, then the custom code css is written inside the library tailwind.css. In your release note of july 2021, you even invite customers to use this feature intensively to handle multiple images inside pages : https://pinegrow.com/release_notes/pinegrow-web-editor-6-1-july-28-2021/
I discovered this behavior because I was struggling to retrieve the image at the top of the page of the template Design of the Week Template 6 - Pinegrow Web Editor. This image was absent when I created a new page with this template because the tailwind.css is regenerated from scratch based on usages inside html code, so we lose the custom code.
This use case shows this is unexpected behavior and go against the principle of never modyfing an external library but I do understand that the Design panel is designed to modify the framework color and font variables to test random designs.
So in conclusion, using the Design panel makes the project tighted to this custom tailwind.css, which is unfortunate because one of the main benefit of using tailwindcss is to have consistency across projects.
Can’t we find a better solution that satisfy both worlds?
Hi @AnonymeForLiberty,
I talked a little to Matjaz about this one. He feels that this is actually best practices for the Tailwind CSS library based on their website. Tailwind CSS is a bit odd, because they prefer you to pass their library through a preprocessor to eliminate unused classes. This means the ‘tailwind.css’ file for each site is likely going to be different.
As to being able to retrieve the images in the :before, you can turn off the compiler from within the Design panel at the bottom. This will give the full stylesheet with used and unused rules.
Cheers,
Bob
I understand your first point of saying that the framework modifications should be saved inside the framework generated file.
As for the second point, having the full stylesheet doesn’t solve the issue. It’s quite the opposite. I was able to reproduce the behavior but I quite don’t understand what’s the meaning of it. If you create a new projet, with a new page based on the tailwind css block template : https://library.pinegrow.com/tailwind/templates/spacera_tw/, you do have the image at the top of the page that is (section:before) displayed in the IDE. And that’s because the tailwind.css file used by the project is coming from the chosen template. But if you then active the design panel, immediately the template’s tailwind.css is overwritten by a new generated one and then you lose the :before declaration, hence the background image disappears. I’m guessing if the template was also using modified framework color, they would be lost too. This is unexpected but now I know what’s going on and be prepared for it.
In the end, my confusion was coming from the background-image feature inside the Design panel, because it has 2 very different goals :
one tied to the automatization of modification of tailwindcss default colors because it uses the images to pick colors (checkbox Only use the image for colors, selected by default)
and another one when you uncheck “Only use the image for colors”, totally unrelated to tailwindcss, which gives you a way to automatically change background-image of body element or a set of elements
The second feature is a powerful feature because it’s not that far from the online tools we find nowadays that automatically pull off images related to keywords of your article. But it doesn’t make sense that the code generated by this second feature ends in tailwindcss generated file because this is nothing related to the framework. I have checked, the generated css code has nothing to do with tailwindcss. But I do understand the thinking of the author of the addon “hey I’m randomizing the colors and fonts of the framework, why now not also randomizing the background-images, cool feature (which it really is). Lets save everything inside tailwind.css as the reste of the panel, it’s easier”.
No idea if something must be done. If it was me, I would add an option to save the background-image related code into a custom css file of my choice. This is a hidden feature so probably very few customers have came across the same problems as I have…
Hope my journey through mastering Pinegrow will help some others
If I open the template, save as a project, and then activate the Design panel, the image is still there. There is a rule .poster:before that places the image there. Adding an image used only for colors doesn’t alter the CSS. Only adding a image to the body or a specific element background through the Design panel changes the CSS output. Maybe I’m missing something.
Yup, this is true. That is why we recommend that the Design panel be turned on before customizing your theme. If you are loading in a pre-made theme where you want to keep the existing color theme, you can delete colors from the Design panel. So if you like the primary and secondary colors of the existing theme, just delete them from the design panel. These will remain fixed to the original theme colors as the Design panel isn’t over-riding them and any accent colors can still be changed with the surprise me button, for example.
If you look at the tailwind best practices and consider page speed, this is actually a good/correct way to do this. Using the JIT compiler you are (basically) taking all of your styling across multiple sheets, tossing out what isn’t being used and condensing into a single sheet. This minimizes requests and makes the styling as small as possible. I guess it is mostly still calling it “tailwind.css” that is creating confusion/consternation. Maybe it should be called “custom-tailwind.css” or “tailwind-theme.css”.
Hope this clarifies our thinking,
Bob
This is weird, we must be missing something here, no matter how often I do it, the image disappears and I understand why it disappears. Don’t know why you can’t reproduce the situation. Let me try one last time : open pinegrow > new file or project > Tailwind CSS Blocks > Template Spacera > Open > save > create new directory > save index.html into that directory > Would you like to open … as a projet? > yes > panel design > activate > boom the image disappears, and I understand why, the tailwind.css that was downloaded with the theme and contains user custom code got replaced by the newly generated tailwind.css whose content is based on what css classes are used in the html code.
Yeah, its about what rules we obey as a developer. And maybe I’m not into how Tailwindcss see things and I understand you want to be neutral.
I do agree that if you customize default variables of a framework that it makes sense to save those modifications inside the framework file but still, I don’t agree that you put also all css user custom code and unrelated to the framework.
Pinegrow doesn’t merge js/css files, doesn’t minify js/css files, we have to do all this work for optimisation outside this IDE if we want our code to be production ready (doing it inside pinegrow would be great by the way). Why starting to merge user custom css code into the framework file ?
Hope you understand I don’t bother to argue and I respect your choices,
Hi @AnonymeForLiberty,
It seems like there was a temporary glitch in the matrix! Try reloading Pinegrow and then do the test again. As an aside, not trying to argue, Pinegrow does eliminate unused rule if you are using SASS in Bootstrap. It is an option in the settings. It still doesn’t minify (you would have to check out some 3rd-party Pinegrow plugins for this).
Cheers,
Bob
