Oxygen

Oxygen is the ultimate visual site builder for WordPress & WooCommerce. Use Oxygen’s unparalelled power, flexibility, and light-weight code to visually design your WordPress or WooCommerce site with ease.

Using Tailwind CSS in Oxygen

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

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

Plain Classes

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

Once installed, you will see the ⚡ icon on the element panel.

Autocomplete class names

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

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.

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

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.