Skip to content
On this page

What is Oxywind?

Wakaloka Oxywind is a Tailwind CSS integration for Oxygen, that brings you the power of Tailwind CSS right on your WordPress hosted on any kind of server even shared-hosting. We have researched the best way to integrate Tailwind CSS with Oxygen and have implemented it in the most efficient way.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, dark:bg-blue, and rotate-90 that can be composed to build any design, directly in your HTML.

Some highlighted features of Tailwind CSS:

  • Tiny Final CSS: Most Tailwind projects ship less than 10kB for the entire website.
  • Tons of design sets and components available, free and paid.
  • Dark mode: Easily build a dark theme, that can be switched with toggle button.
  • Utility classes: No more wasting energy inventing class names.
  • Responsive: Mobile-first by default, but you can change it to desktop-first easily.
  • Handling Hover, Focus, and Other States.
  • And much more. See the Tailwind CSS site for more details.

How the Oxywind works?

Oxywind implements the CDN for the development inside the Oxygen 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 Oxywind as your first step - grasp the basics then come back!