Bricks

Bricks is a visual site builder for WordPress. Bricks allow you to build a beautiful site with unmatched performance, design, and customizability.

Using Tailwind CSS in Bricks

Section titled Using Tailwind CSS in Bricks

The Yabe Siul first-class integration with Bricks allows you to use Tailwind CSS directly in Bricks editor.

Start type the Tailwind’s class name in the Bricks editor, and the element on the canvas will be styled accordingly.

Plain Classes

Section titled Plain Classes

Plain Classes is a field in the Bricks editor that allows you to add custom classes to Bricks elements without adding the class to the Global Class database.

You will see the ⚡ icon on the element panel.

Autocomplete class names

Section titled Autocomplete class names

The Tailwind CSS cheat sheet is right on your visual builder editor. This makes it easy to use Tailwind CSS in Bricks.

As you type on the Plain Classes field, Tailwind class names will be suggested automatically. You can use the arrow keys to navigate through the suggestions and press Enter to select the class name.

HTML to Bricks

Section titled HTML to Bricks

Tailwind CSS has tons of ready-made components and templates. You can copy the HTML code and paste it into the Bricks editor.

The HTML code will be converted to Bricks elements automatically. The Tailwind CSS classes will be imported to the Plain Classes field.

You will see the Paste HTML menu on the Context Menu panel.

Hover Preview

Section titled Hover Preview

Hover the Tailwind class name to see the completed generated CSS code.

Based on the official Tailwind CSS extension for Visual Studio Code.

Class Sorting

Section titled Class Sorting

Automatic class name sorting based on the Tailwind CSS official recommendation.

Click the button and the class names will be sorted automatically based on the official recommendation.