There are a lot of great frameworks for Oxygen out there such as Automatic.css, OxyNinja, and OxyMade. In this article, we're going to go over Tailwind CSS, which is a framework that is a utility-first CSS framework that only loads the necessary CSS from its framework onto your site. This is slightly different from the other frameworks above that load all their classes and stylesheets into Oxygen, which means their entire framework is loaded onto your site.

Now, there are at least two quick-start ways to get Tailwind CSS working with Oxygen. The first is through a plugin called Oxywind, which has a yearly cost and is designed specifically for Oxygen. The second is through a plugin called TailPress, which is free (at least at the time of this writing).

We're going to use TailPress in this example.

Basic Setup:

To get started with Tailwind CSS, you'll need to do the following:

1. Go to Plugins > Add New in /wp-admin and search for "TailPress". Once you've found the plugin, install it and activate it.
2. Next, go to https://tailwindcss.com, and keep that tab open as you'll want to reference it for class names.

That's it for the basic setup, we can now get started designing with Tailwind CSS.

Designing a Site in Oxygen:

Now that Tailwind CSS is all set, we can get started on designing. You can do this by opening a page or template in Oxygen.

Once you have a page or template open, go ahead and start adding some classes to an element. For example, to make a Section black, you can add the class "bg-black" to the Section.

You can use other colors with different shades as well, such as "bg-indigo-700" or "bg-indigo-400".

Or, you can use "text-center" to center-align the text within a section, and you can use "text-white" to make the font color white. And you can change the font size by using something such as "text-2xl" or "text-4xl".

As long as the class is available in Tailwind CSS, you'll see the changes take place immediately in Oxygen and on the front end.

The one caveat to the TailPress integration with Oxygen is that each class will be added twice to the stylesheet. The first time, the class is added by Oxygen and will contain a blank CSS declaration. The second time, the class is added by TailPress with the necessary rules for the declaration. So, this does create a small amount of bloat on your site. I don't know how/if Oxywind handles this in their plugin.

Modifying your Tailwind Config

TailPress does allow you to modify your Tailwind Config via Settings > TailPress in /wp-admin. So, for example, you can add custom colors using something such as the following:

{
	corePlugins: {
		preflight: false,
	},
	theme: {
		colors: {
			'primary':'#223543',
			'secondary':'#ca9d76',
			'accent':'#dcd9c1',
			'base':'#5d5d52',
			'shade':'#73724a',
		}
	}
}

You can then call those colors in Oxygen using classes such as "text-primary" or "bg-color-primary". This is great when you want to keep your colors subjective to their use and allow for easy color updating based on holidays or dark themes.

There are more options you can add to your configuration that you can read about here: https://tailwindcss.com/docs/theme.

That's it for this tutorial, happy sailing!

As a WooCommerce store owner, you may find yourself wanting to change something in a WooCommerce template from time to time. This might be changing the wording of an email template on the checkout page or something else altogether.

Traditionally, you would add the WooCommerce template to the appropriate directory in a theme. However, since Oxygen disables the WordPress theme system, you’ll need to do this using a custom plugin.

We’ve created the WooCommerce Templates for Oxygen plugin that includes the necessary functions to tell WooCommerce to use its templates first instead of the default templates. 

How to use the WooCommerce Templates for Oxygen. 

• Download the plugin and unzip it to your computer:
• Copy the WooCommerce template you'd like to override to the appropriate directory within this plugin. You may find a list of WooCommerce templates for your version of WooCommerce here: https://docs.woocommerce.com/document/template-structure/.
• Make the desired changes to the overridden template and save. 
• Zip the plugin.
• Upload your zipped version of this plugin to your WordPress install.

A Step-By-Step Example:

Let’s assume you'd like to change the “Proceed to checkout” text on the product page to “Proceed to Shipping Dock”. 

To do this, download the plugin from the link provided above and unzip it on your computer. Next, open the entire folder (woocommerce-templates-oxygen-main) in a code editor, such as Visual Studio Code.

Now, you're ready to get the desired WooCommerce template file. Use the WooCommerce Template Structure link above to be directed to WooCommerce's GitHub and find the appropriate template for the version of WooCommerce you are using.

For this example, the template may be found under Templates > Cart: https://github.com/woocommerce/woocommerce/blob/trunk/templates/cart/proceed-to-checkout-button.php.

The easiest way to get this template into the plugin is to click the Raw button on GitHub and copy the code on that page. 

Go back into your code editor, create a new file under the WooCommerce > Cart directory called proceed-to-checkout-button.php.

It’s crucial that the filenames and locations in your plugin directly match the location in WooCommerce. Otherwise, the override may not work correctly. 

Now you can edit the template as needed. In this scenario, we are simply updating the “Proceed to checkout” text to “Proceed to Shipping Dock”. Once you're happy with the changes, save the file.

Now, all you'll need to do is zip back up the entire woocommerce-templates-oxygen-main directory and upload it to WordPress. 

Once activated, you should be able to navigate to the Cart page and see the changes. 

That’s all there is to it. 

Happy voyages!

Featured Image by Mudassar Iqbal from Pixabay