Elementor

Autocomplete Location

The Plain Classes field is located at the top of the left sidebar. It becomes visible once you select an element inside the Elementor iframe or from the list tree.

Atomic elements (Elementor 4)

Elementor 4's Atomic elements (Div block, Flexbox, Heading, Paragraph, …) get their own Winden Classes section at the top of the General tab. It has the same textarea, autocomplete and Split by breakpoint toggle as the classic panel. Any Tailwind class works, including variants and arbitrary values such as md:p-4, hover:bg-blue-500 or w-1/2. Winden stores these classes in its own setting on the element, separate from Elementor's own Classes picker, and adds them to the element in the editor and on the frontend. Tested with Elementor 4.3.2.

Jump straight to an element's classes

Hold ⌥ Option (Alt on Windows) and click an Atomic element on the canvas. The element is selected, the panel opens on the General tab, and the caret lands at the end of its Winden Classes field, ready to type. A plain click works as before, including Elementor's inline text editing on headings and paragraphs. If the element is already selected and its panel shows the Style tab, switch to General first.

Compile on post save

With the Builders integration, we also implemented automatic compile-on-post-save. You no longer need to open Winden manually to recompile your CSS. Whenever a post is saved, a signal is sent to Winden, which scans all classes used in the post and regenerates output.css automatically. This happens even with "Disable Dev Mode" turned on — that setting only controls whether logged-in visitors get the live compiler on the frontend. The builder editor itself always keeps the compiler and autocomplete available. If a change happens outside this editor — content saved elsewhere, a menu or widget update, a scheduled post going live — Winden compiles it the next time you open a builder editor or the Winden admin, or the next time an admin views the page on the frontend.