Integrations

Gutenberg

Learn how to use Tailwind CSS with Gutenberg/Block editor in WordPress.

What is Gutenberg?

Gutenberg is the new default WordPress editor. It is the block editor, introducing a modular approach to website customization. It allows users to edit individual content blocks on posts or pages, add and adjust widgets, and design site headers, footers, and navigation with full site editing support. Each piece of content in the editor, from a paragraph to an image gallery to a headline, is its own block. These blocks can be added, arranged, and rearranged, enabling users to create media-rich content and site layouts in a visually intuitive way without workarounds like shortcodes or custom HTML and PHP.

Following the introduction of post block editing in December 2018, Gutenberg later introduced full site editing (FSE) in 2021, which shipped with WordPress 5.9 in early 2022. The project is divided into four phases: Easier Editing, Customization, Collaboration, and Multilingual. Currently, Phase 2 of the Gutenberg project formally wrapped with WordPress 6.3, and exploration of Phase 3 (Collaboration) is underway.

Learn more about Gutenberg on the official website.

Using Tailwind CSS with Gutenberg

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

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 WordPress block editor experience with Tailwind CSS.

Plain Classes input field

WindPress provides a simple input field in the Block settings panel of the Gutenberg editor. This feature allows you to directly add Tailwind CSS classes to the blocks in the block editor as plain text, and you can see the changes in real-time. The input field supports the complete range of Tailwind CSS classes.

To access the Plain Classes input field, simply select an element in the Block editor and the input field will appear in the Block 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. Write less, style faster.

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

Autocomplete class names

Class Sorting

WindPress provides a class sorting feature that arranges the Tailwind CSS classes in the Plain Classes input field based on the Tailwind CSS official recommendation. This feature helps you follow the best practices and recommended class order.

Class Sorting

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 block editor.

Hover Preview the generated css for the class


Made with hundred of in Indonesia