Tailwind Visual Editor is an add-on for Pinegrow Web Editor that lets you visually edit TailwindCSS projects.
First, take a look at the landing page to get an overview of how it works.
Then, check out these topics to learn more:
Tailwind Visual Editor
Introduction to Tailwind CSS
Tailwind CSS is a CSS framework that defines 1000s of CSS classes that are used to replace working with CSS rules and properties directly.
Opening or creating a project
Pinegrow projects are simply folders on your computer that contain a website or web application.
Activating the Tailwind extension
Pinegrow Web Editor has extensions that implement support for frameworks like TailwindCSS, Bootstrap, Foundation… To start working with Tailwind Visual Editor we have to first activate it for the page.
Visual controls
Visual controls are the core of Tailwind Visual Editor. They are located in the Properties panel.
Customized Tailwind CSS themes
New in Tailwind Visual Editor – Use Visual controls to work with your custom Tailwind CSS themes.
Helpers
There are a bunch of Tailwind helpers sprinkled throughout Pinegrow Web Editor:
Styles
Tailwind Visual Editor comes with a powerful feature that makes working with Tailwind even easier – Styles and Styles manager.
Tailwind Blocks
Tailwind Visual Editor comes with a rich library of ready-made blocks that you can use to quickly create good-looking Tailwind CSS projects.
Component libraries
TailwindCSS differs from frameworks like Bootstrap in that it comes with no ready-made components like buttons, alerts…
Tailwind CSS Design panel
The Pinegrow Design panel for the Tailwind CSS framework allows you to easily set up a custom theme without editing any config file or setting up a complex compiler. It also allows you to test alternative designs for your whole project quickly and easily.
Tailwind CSS Floating Tools
The Floating Tools panel allows you to style your Tailwind CSS page with many of the common classes directly within the Page View, speeding up page construction and design implementation. No more switching between the page and the Properties or Style Panel. Let’s explore just what this tool allows you to do!
TailwindUI
TailwindUI is a premium Tailwind component library created by authors of TailwindCSS. Tailwind Visual Editor adds the TailwindUI library into the Library panel and extends visual controls with Tailwind UI extensions.
Tutorials
Learn about TailwindCSS and Tailwind Visual Editor with our step-by-step tutorials.
Using the external build process
Learn how to use Pinegrow with an external Tailwind CSS compilation process (not with using the built-in compiler).
Class Tree inspector
Visual controls for Tailwind CSS are nice, but for more experienced users working with them requires too much clicking and scrolling around.
CSS Styling with Component Styles
Tailwind can be used to do regular selector-based CSS styling, without utility classes in HTML.
Tailwind Visual Editor Updates
Keep up to date with improvements of Tailwind Visual Editor.