What’s Tailwind Oxide Engine? The Next Evolution of Tailwind CSS

7 min readJul 24, 2023

Tailwind CSS, with its fast utility-first approach to styling, amazing design systems, and the ability to be consistent across projects and teams, has emerged as a game-changer in the web development space.

With over 25 million downloads per month and brands like Shopify, OpenAI, Netflix, Nike, Mr. Beast’s Feastables, and many many more using it (more than 5 million of open-source projects on Github), its popularity is more than clear.

Building on this foundation, Adam Wathan and Tailwind Labs are now working on the Tailwind Oxide Engine, a significant evolution that simplifies the toolchain, boosts performance, and streamlines configuration.

Table of Contents:

· Will Oxide break my app?
· What is Tailwind Oxide Engine?
∘ 1) Unified toolchain
∘ 2) Oxide under the hood — ⚡ ️Lightning CSS
∘ 3) Simplified Configuration
· Conclusion — The Impact of the Oxide Engine on Tailwind

Will Oxide break my app?

Short answer: No, it will not.

First of all, Oxide is not some new paradigm shift in how developers write Tailwind CSS but rather a set of upgrades to what’s going on under the hood.

It’s also worth mentioning that all these changes should be backwards compatible since that’s the team’s goal.

What is Tailwind Oxide Engine?

As mentioned earlier, Oxide is designed to unify the toolchain, boost performance, and streamline configuration.

So let’s start with the toolchain first.

1) Unified toolchain

The term “toolchain” refers to the set of software development tools used in combination to complete complex tasks.

In the context of Tailwind CSS, the toolchain includes dependencies like:

PostCSS: This is the foundation which Tailwind CSS is built upon. It transforms styles with JavaScript, allowing for features like variables, nesting, and mixins.
AutoPrefixer: A PostCSS plugin that automatically adds vendor prefixes CSS. This makes styles work across different browsers (even those that require specific prefixes for certain CSS features).
PostCSS Import: This plugin allows to use @import rules in CSS for a more modular CSS structure. These rules are then processed at build time.
PostCSS Preset Env: This plugin automatically adds necessary fallbacks for older browsers and handles compatibility issues.

But that means developers have to manage these dependencies and everything that comes with it themselves.

In essence, Oxide integrates these functionalities by incorporating the logic of these separate tools into its own codebase. This allows Oxide to provide the same functionalities as these tools without requiring them as separate dependencies.

2) Oxide under the hood — ⚡ ️Lightning CSS

Now let’s look at how Oxide improves Tailwind’s performance.

Oxide is powered by a Rust-based CSS transformation tool called Lightning CSS, developed by the Parcel team. Essentially, Lightning CSS handles all the features that would typically require a separate PostCSS plugin.

Lightning CSS is super fast, outperforming comparable JavaScript-based tools by over 100 times and also does a better job at minifying which reduces the final .css file size even more as well.

It can process and minify 2.7 million lines of code per second on a single thread, but it’s leveraging Rust’s ability to use multithreading and parallelization to be blazingly fast.

Oxide makes Tailwind more than 2x faster during build time than the current version.

Chart comparing tailwind 3.3 and 3.4 build time

In addition, Lightning CSS supports CSS modules, which locally scope classes, ids, @keyframes, CSS variables, and more. This feature is particularly useful in preventing unintended name clashes between different CSS files.

Look at Lightning CSS docs if you want to learn more.

3) Simplified Configuration

Right now, there are two config files that developers need to manage, and that’s tailwind.config.js and postcss.config.js.

But there is also the app.css file which is used for importing Tailwind's base, components, and utilities, adding custom styles or overrides, and with Oxide, defining your theme and fonts directly in your CSS.

The goal here is to make Tailwind CSS feel native so that you just install it, it works, and you go (or at least mitigate the configuration needed as much as possible).

Let’s quickly look at app.css first since we will come back to it again a little later in conjunction with tailwind.config.js.

— app.css

In the app.css file you need to use directives like @tailwind base;, @tailwind components;, and @tailwind utilities; to import different parts of Tailwind CSS into your project.

/* app.css */ 
@tailwind base;
@tailwind components;
@tailwind utilities;

/* or something like @import "tailwindcss/base" with postcss-imports */

@import "./fonts" layer(base)

That is now reduced only to

/* app.css */ 
@import 'tailwindcss';

@import "./fonts" layer(base)

Very minor but nice quality of life change.

Now we’ll look at tailwind.config.js.

— tailwind.config.js

// tailwind.config.js.
module.exports = {
  content: [
    './src/app/**/*.{js,ts,jsx,tsx}',
    './src/pages/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'sans-serif'],
        monument: ['Monument', 'sans-serif'],
      },
      colors: {
        primary: '#0D6EFD',
        secondary: '#6D28D9',
      },
    },
  },
  plugins: [],
}

One of the most common, annoying, but very simple problem developers are running into is they are forgetting to update their content array in tailwind.config.js.

They then waste time debugging, trying to figure out why is the class not being applied when it’s there in the code.

The answer to this is automatic content detection.

Since the engine is rewritten in Rust, it can do more work and way faster than it was possible before.

The team came up with some “smart algorithms” that can make educated guesses about where files are located based on existing files, their locations, and the extensions used.

That means you can get rid of the content array completely.

// tailwind.config.js.
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Roboto', 'sans-serif'],
        monument: ['Monument', 'sans-serif'],
      },
      colors: {
        primary: '#0D6EFD',
        secondary: '#6D28D9',
      },
    },
  },
  plugins: [],
}

The team is also prototyping and experimenting with CSS-based configuration (theme) in tailwind.config.js.

Again the goal is to make Tailwind feel more native and right now we are wrapping these CSS values in Javascript and putting them in a config file.

We basically have CSS where it shouldn’t be and overall have an awkward Javascript layer on top of it.

So the idea is to get rid of tailwind.config.js completely and move all the stuff to app.css.

So in the future we will be able to do something like this

/* app.css */
/* experimental */
@import 'tailwindcss';

@import "./fonts" layer(base)

:root {
  --font-family-sans: 'Roboto', 'sans-serif';
  --font-family-monument: 'Monument', 'sans-serif';

  --color-primary: #0D6EFD;
  --color-secondary: #6D28D9;
}

This to me definitely feels like a way nicer developer experience since we don’t have this weird separation of CSS in some config file anymore and the code is exactly where I would be expecting it to be.

— postcss.config.js

Here the idea of feeling more native is the same and as we mentioned before Oxide integrates all postCSS plugins you could think of in itself.

There are also some rules about the order of having these plugins in the config file because each plugin transforms the CSS code in a specific way, and the order of transformations can affect the final result.

Managing that is just unnecessary mental overhead and is prone to errors.

This is an example of how postcss.config.js could look like

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-css-variables': {},
    'postcss-nested': {},
    tailwindcss: {},
    autoprefixer: {},
    'postcss-preset-env': {},
  },
}

Well with Oxide all you’ll need and all you’ll have to worry about is this.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
  },
}

But the team is also apparently collaborating with some major frameworks and build tools (that’s all we know for now) to get Tailwind detected so that we don’t even need the postcss.config.js file.

Conclusion — The Impact of the Oxide Engine on Tailwind

The introduction of the Oxide Engine marks a significant milestone in the evolution of Tailwind CSS.

By enhancing the strengths of Tailwind and addressing some of its complexities, Oxide is set to make Tailwind a more powerful, efficient, and user-friendly tool for web developers.

The performance improvements brought about by the integration of Lightning CSS, coupled with the simplification of the development process through automatic content detection and CSS-based configuration, are poised to really enhance the Tailwind experience. These features not only streamline the development process but also make Tailwind more intuitive and accessible.

Moreover, Oxide’s focus on making Tailwind feel more native to CSS brings Tailwind closer to the core of CSS development. This is a significant step towards integrating Tailwind more seamlessly into the web development process.

Overall Oxide promises to enhance the efficiency of development cycles, simplify the development process, and make Tailwind a more integrated part of the web development toolkit. The future of Tailwind, powered by the Oxide Engine, looks promising and exciting for the web development community.

References

“Tailwind Connect — Keynote.” Tailwind Labs, 2023.
“Tailwind CSS Documentation.” Tailwind Labs, 2023.
“Lightning CSS Documentation.” Devon Govett and Parcel Contributors, 2023.