SOLVED: Child Theme Stylesheet Overrides Builder UI

Bugs
1

Bricks Version: 1.3.7 beta
Browser: Edge 97
OS: macOS

I’m using the Bricks Child and have enqueued a stylesheet that only has the Tailwind CSS 3.0 directives included. No other custom styles to keep testing simple.

@tailwind base;
@tailwind components;
@tailwind utilities;

The white outlines to the inputs in the attached screenshot are caused by the the inclusion of the Tailwind Form add-on. @tailwindcss/forms

There are several noticeable visual interference when using a child stylesheet. The dynamic data lighting bolt is moved out of place. The version number on the loading screen is not positioned.

I wrapped all the styles inside of .bricks-is-frontend and that solves not having the styles interfere with the editor UI. However then none of the custom styles would be visible inside of the editor for the web pages themselves.

I am sure any non-prefixed custom styles or framework CSS would cause interference.

It appears the action wp_enqueue_scripts is loading the enqueued styles for both the editor UI and the editor preview Iframe. Probably need some way that the normal wp_enqueue_scripts doesn’t load directly into the editor UI.

Screen Shot 2022-01-11 at 8.58.00 AM
Screen Shot 2022-01-11 at 8.58.00 AM1908×883 305 KB

2

Hi Aaron,

Welcome to the forum and thanks a lot for your report!

We currently have another open report about custom CSS partly affecting the Builder Panel UI, but it needs some more investigation.

I think the easiest solution for your specific Tailwind problem is to prefix your styles, so they shouldn’t affect the builder styles.

I’ll add the link to this thread to our task as well, let’s see if we can make the UI more bulletproof :v:

Best regards,
timmse

1 Like
3

@aaron A warm welcome also from me :wave: Great to have you here.

Bricks has a PHP function called bricks_is_builder_main() that returns true if the builder panel is being loaded.

By checking against it you can make sure that your files are not being enqueued in the builder panel, but only on the canvas (iframe) and on the frontend :slight_smile:

I’ve added a code example about how to use it the to “Child Theme” Academy article as well:

You can also download the updated child theme code from your Bricks account.

1 Like
4

Woo that is so awesome! Thanks you for taking care of this.

1 Like
5

Curious if you were able to get Bricks to work with Tailwind? I’m experimenting with that as well. Was this on a local dev server?

thanks!

1 Like
6

I know this is an old post but for anyone trying to do this, I have found Winden to work very nice to integrate Tailwind into Bricks Builder. (Winden | dplugins.com)

There are free are other solutions for this including a free plugin called tailpress but they rely on just using the CDN for tailwind. If you want the entire CSS of a default tailwind and to use it without customization then that may be an option for you. The reason for tailwind over something like bootstrap though is customization.

Winden is much better in that it allow for very easy customizations and only includes the classes that you use in your design so the production mode css is very small.

1 Like