Skip to content
Jooosi
Account
WP WindPress

Cached CSS

Generate a tiny single cached CSS file for the fastest performance.

Browse documentation
Overview
Contents
On this page
  1. Environments
  2. Development
  3. Production
  4. Configuring Cached CSS Mode
  5. Step 1: Navigate to the WindPress admin screen
  6. Step 2: Switch to Performance page
  7. Step 3: Select a CSS mode
  8. Step 4: Save the changes
  9. Generating the Cached CSS
  10. Step 1: Click the Generate button
  11. Step 2: Review the generated CSS

Tailwind CSS generates CSS based on the actual usage of the project, aiming to produce the smallest possible CSS file and improve performance. Even for large projects, when combined with minification, Tailwind CSS generate a single CSS file that's less than 5kB, which can be downloaded once and cached for all pages.

Environments#

WindPress uses a hybrid approach to integrate Tailwind CSS into WordPress and produce the styles.

Development#

During development, WindPress loads the development libraries to provide the full Tailwind CSS experience, including the compiler, which allows you to use any Tailwind CSS classes and generates the styles on-demand.

Production#

You can tell WindPress to generate a tiny single cached CSS file for the most performance in the production environment. WindPress will scan the project for all the Tailwind CSS classes used and generate a single CSS file containing only the styles used in the project.

The cached CSS file is generated using the same compiler as the development environment to ensure consistent styles across both environments. To further optimize it, WindPress uses Lightning CSS for vendor prefixing, fallbacks for modern syntaxes, handling nesting, and minifying to create the smallest possible build with the widest browser support.

The generated cached CSS file will be served from and stored to the /wp-content/uploads/windpress/cache/tailwind.css path.

BASH
wp-content/
└─ uploads/
   └─ windpress/
      └─ cache/
         └─ tailwind.css

Configuring Cached CSS Mode#

Learn how to choose how WindPress loads CSS in the production environment.

Step 1: Navigate to the WindPress admin screen#

On the left sidebar menu of the WordPress admin dashboard, click on the WindPress icon to open the WindPress admin screen.

Step 2: Switch to Performance page#

Click on the Settings → Performance submenu.

Switch to Performance submenu

Step 3: Select a CSS mode#

In the Cached CSS section, choose a mode based on your workflow:

  • Cached – Load cached CSS when available, otherwise fallback to Compiler.
  • Hybrid – Inline cached CSS when available, then run the Compiler to regenerate the style.
  • Compiler – Always use the Compiler to generate the style.
Select a CSS mode

Step 4: Save the changes#

Click on the Save button to apply the changes.

Save changes

Generating the Cached CSS#

After selecting Cached or Hybrid, you may want to generate the cached CSS file.

Step 1: Click the Generate button#

To scan the project for all the Tailwind CSS classes used and generate the cached CSS file, click the Generate button in the Cached CSS section.

Click the Generate button

Step 2: Review the generated CSS#

Once the cached CSS file is generated, you can review the contents by clicking the icon next to the timestamp of the generated file.

Review the generated CSS