Integrations

Breakdance

Learn how to use Tailwind CSS with Breakdance Builder in WordPress.

What is Breakdance?

Breakdance is a modern visual website builder for WordPress. It features an intuitive interface that is suitable for both beginners and experienced developers. The platform offers a comprehensive suite of over 120 builder elements, including essential components like sections, columns, headings, and images, as well as advanced features such as pricing tables, image galleries, and sliders. This wide range of elements empowers users to create diverse and dynamic websites without requiring extensive coding knowledge.

Beyond its user-friendly design, Breakdance incorporates advanced functionalities to meet the needs of power users. It supports dynamic data integration with tools such as Advanced Custom Fields (ACF) and Toolset. It features a flexbox layout engine, allowing for precise design control, and provides developer APIs for handling dynamic data, form actions, conditions, and element creation. Additionally, Breakdance enables the inclusion of custom PHP, CSS, HTML, and JavaScript directly within the builder, giving developers the flexibility to implement custom code as necessary.

Learn more about Breakdance on the official website.

Using Tailwind CSS with Breakdance

WindPress provides a simple way to use Tailwind CSS with Breakdance. It's first-class integration with Breakdance allows you to use Tailwind CSS in your Breakdance plugin without any additional configuration, providing a seamless experience.

Breakdance integration is available in the WindPress pro edition.

WindPress will automatically load the necessary modules to provide the full Tailwind CSS experience, including the compiler and scanner.

Features

WindPress provides a range of exclusive features to enhance your Breakdance experience with Tailwind CSS.

Plain Classes input field

WindPress provides a simple input field in the Element settings panel of the Breakdance editor. This feature allows you to directly add Tailwind CSS classes to the elements in the Breakdance editor as plain text, and you can see the changes in real-time. The input field supports the complete range of Tailwind CSS classes and does not clutter the Breakdance class system.

To access the Plain Classes input field, simply select an element in the Breakdance editor and the input field will appear in the Element settings panel.

Plain Classes input field

Autocomplete class names

As you type in the Plain Classes input field, WindPress will provide intelligent suggestions for Tailwind CSS class names that match the configuration of your Tailwind CSS project. Less guessing, more productivity.

The suggestion list automatically updates as you type, providing you with the most relevant class names.

Autocomplete class names

Hover Preview

Hover over the Tailwind CSS class in the Plain Classes input field to see a preview of the generated CSS for the class names. This feature provides a quick way to see how the class will affect the element in the Breakdance editor.

Hover Preview the generated css for the class

Variable Picker

The variables in Tailwind CSS are available starting from version 4.x and later.

Want to compose a custom class with the Tailwind CSS design system? WindPress provides a Variable Picker that allows you to select the Tailwind CSS variables and compose a custom class on the Breakdance editor. The Variable Picker provides a visual way to select the variables and see the generated CSS in real-time.

To access the Variable Picker panel, shift + left-click on the style input field in the Element settings panel.

Variable Picker

Ubiquitous Panel

The Ubiquitous Panel feature allows you to access the WindPress settings directly from the Breakdance editor. This panel provides quick access to the WindPress settings, enabling you to make adjustments to the configuration without having to leave the Breakdance editor.

Ubiquitous Panel


Made with hundred of in Indonesia