Winden provides full integration of TailwindCSS JavaScript for the framework, TailwindCSS configuration, and TailwindCSS styling within visual builder iframes and website front ends.
While developing a website, the entire framework is loaded, allowing you to see an instant preview as you add classes to your elements.
In addition to framework integration, Winden offers helper functions and autocomplete suggestions based on your default or customized configuration.
CDN
Prior to Tailwind CSS v3.4.x, the CDN provided a JavaScript file containing pre-generated CSS for every default Tailwind CSS class. This approach led to a large volume of CSS classes being loaded in the browser.
With Tailwind CSS v3.4.x, the CDN is now powered by the Just-in-Time (JIT) engine, which generates only the styles needed for your design on demand. This engine runs directly in the browser via the CDN, eliminating the need for build steps.
Winden optimizes files specifically for loading within builder iframes (without affecting the builder itself), allowing you to preview your website as you add classes to your elements.
Worker.
Now compile in browser
While the CDN is enough to run the Tailwind CSS and generate the styles right on your browser, however it may not ideal for the production site.
The JIT engine CDN size is ~406kB (no compression) and it is too heavy to be loaded for every request.
Since the CDN is a javascript code and generates the style on the fly, there will be a “blip” or flash on your page on the initial of the request as the result of waiting for the style generated completely. This may affect the performance and the Lighthouse score of your website.
To address this issue, we have provided a feature on Winden for you to generate and cache the CSS file instead of loading the CDN on the front page.
With latest version of the Winden every time you press save inside Winden, compile process will be started and purged css will generated.
In this process Winden will scan all pages, posts, templates and also files if feature is selected and based on class names used and configuration we will generate css with only user classes that will genera small css that can be small as 10kb for the entire website.
- Save option
- Generated CSS file status aka Cache