Winden 2.0

Winden: How does it work?

The Winden implements the CDN for the development inside the Oxygen, Bricks and Gutenberg editor and the Worker to generate the CSS cache for production.

CDN

Prior to Tailwind CSS v3.0 (v2.0 or earlier), the CDN provided is a giant CSS file that contains pre-generated CSS classes for every default class that is available in the Tailwind CSS. This results in a huge amount of CSS classes that will be loaded on your browser.

The CDN for Tailwind CSS v3.0 and later is powered by the Just-in-Time (JIT) engine. The JIT engine generates styles you need for your design on-demand and can be run directly in the browser using a CDN without any build steps.

Oxywind loads the JIT engine into the Oxygen editor and generates the style you need on-the-fly and instant.

Worker

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 ~355kB (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 Oxywind for you to generate and cache the CSS file instead of loading the CDN on the front page. This feature will be referred as “Worker” for the rest of this documentation.

Prerequisites

The rest of the documentation assumes basic familiarity with Tailwind CSS. If you are totally new to Tailwind CSS, it might not be the best idea to jump right into the Winden as your first step – grasp the basics then come back!

Table of Contents