Customization #

Tailwind CSS has been designed from the ground up to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework. Because Tailwind CSS is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind.

Oxywind try to preserve this customization flexibility when integrating the Tailwind CSS with the Oxygen.

Some customization may more conveniently be done in your favorite text editor such as VS Code or Sublime Text. These customizations can be stored as a file in the wp-content/uploads/oxywind folder of your sites, given the following directory structure:

.
└─ wp-content
   └─ uploads
      └─ oxywind
         ├─ global.css
         ├─ cdn.config.js
         └─ tailwind.config.js

Global CSS #

The Global CSS is the main CSS that the Tailwind CSS referred to when generating the style of the website.

Tailwind CSS official documentation has covered this topic in-depth, some of them are:

• https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
• https://tailwindcss.com/docs/functions-and-directives

If you want to customize your main CSS, add your customizations to the "Global CSS" field on Oxygen Builder > Oxywind menu and under the Settings section tab.

The main CSS also can be stored as a file wp-content/uploads/oxywind/global.css.

.
└─ wp-content
   └─ uploads
      └─ oxywind
         └─ global.css

Tailwind CSS Configuration #

The development and production phase have different workflow and environment, so the configuration could be different because of the environment specification.

The development phase was using the CDN (which run directly on your browser) to generate the style of the design, and the production phase was using the Worker (which run on the Node.js process) to produce the CSS cache file.

But the configuration of both is very similar. Even for a simple configuration, there is no need for additional actions.

Oxywind by default enable the Tailwind CSS first-party plugins that you can use right away without any additional configuration:

• @tailwindcss/typography
• @tailwindcss/forms
• @tailwindcss/aspect-ratio
• @tailwindcss/line-clamp

CDN Configuration #

The CDN configuration is the same as the Worker configuration, but the only difference is that the JavaScript API and module between the CDN (browser) and Worker (Node.js) could have different specification. A simple explanation of the module format on JavaScript environment could be read on https://dev.to/iggredible/what-the-heck-are-cjs-amd-umd-and-esm-ikm

With the many of Tailwind CSS-specific packages or library is written for Node.js environment, you may need to make some of adjustments to make those packages to be work on the browser as well.

If you want to customize the CDN configuration, add your customizations to the "Tailwind Config (CDN)" field on Oxygen Builder > Oxywind menu and under the Settings section tab.

The CDN configuration also can be stored as a file wp-content/uploads/oxywind/cdn.config.js.

.
└─ wp-content
   └─ uploads
      └─ oxywind
         └─ cdn.config.js

Worker Configuration #

For most of case, the Worker configuration is not needed and the CDN configuration will be used as fallback.

The worker configuration is the same as specified on the Tailwind CSS official documentation.

In addition, Oxywind allow you to install additional NPM packages to the CSS cache generation process. You could be use this feature to install some popular Tailwind CSS plugins such as daisyUI and tailwind-scrollbar.

If you want to customize the Worker configuration, add your customizations to the "Tailwind Config (Worker)" field on Oxygen Builder > Oxywind menu and under the Settings section tab.

The Worker configuration also can be stored as a file wp-content/uploads/oxywind/tailwind.config.js.

.
└─ wp-content
   └─ uploads
      └─ oxywind
         └─ tailwind.config.js

To add additional NPM packages to the CSS cache generation process, add your customizations to the "NPM Package (Worker)" field on Oxygen Builder > Oxywind menu and under the Settings section tab.