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