Tailwind Content Settings

Tailwind CSS in Hyvä themes generates highly optimized stylesheets (around 100kb, ~17kb compressed) by only compiling the CSS classes actually used. To achieve this, Tailwind needs to scan your project files for these classes.

This document explains how to configure Tailwind to find all relevant files, including those in app/code modules, vendor/ modules, or parent themes. You can configure content paths automatically (recommended) or manually.

Automatic Configuration (Recommended)

Hyvä themes automatically manage Tailwind content paths for compatible modules. Since hyva-themes/magento2-theme-module v1.1.15, the app/etc/hyva-themes.json file tracks relevant modules. This file is automatically updated when modules are enabled or disabled.

To manually generate or update this configuration file, run:

bin/magento hyva:config:generate

This command creates a configuration file that tells Tailwind which files to scan for CSS classes. The way this information is used varies by Tailwind CSS version.

Tailwind v4Tailwind v2 and v3

For Tailwind v4, the hyva:config:generate command creates a hyva-source.css file in your theme's web/tailwind/generated directory. This file is then imported into your main tailwind-source.css to automatically include all registered Hyvä modules.

Your theme's web/tailwind/tailwind-source.css should include:

@import "@hyva-themes/hyva-modules/css";
@import "tailwindcss" source(none);
@source "../../**/*.phtml";
@source "../../**/*.xml";

/* Custom styles */
@import "./base";
@import "./components";
@import "./theme";
@import "./utilities";

/* Import generated styles for Hyvä Compatible Modules and Design Tokens */
@import "./generated/hyva-source.css";
@import "./generated/hyva-tokens.css";

The @import "./generated/hyva-source.css"; line automatically includes all registered Hyvä modules.

For Tailwind v2 and v3, the hyva:config:generate command creates a configuration file used by mergeTailwindConfig and postcssImportHyvaModules.

These helpers, integrated into your tailwind.config.js and postcss.config.js, read app/etc/hyva-themes.json and automatically merge the necessary paths into your Tailwind content array. This eliminates the need to manually add paths for Hyvä compatibility modules.

For more information see the @hyva-themes/hyva-modules docs

Manual Configuration

If you need to include paths not covered by the automatic configuration, or prefer manual control, you can add them directly to your Tailwind configuration.

Tailwind v4Tailwind v2 and v3

For Tailwind v4, add additional @source rules to your theme's web/tailwind/tailwind-source.css to include custom paths:

@source "../../**/*.phtml";

/* My Module templates */
@source "../../../../../../code/acme/my-module/**/*.phtml";

For Tailwind v2 and v3, add paths directly to the content array in your theme's tailwind.config.js:

module.exports = mergeTailwindConfig({
  //...
  content: [
    '../../**/*.phtml',

    // My Module templates
    '../../../../../../code/acme/my-module/**/*.phtml',
  ]
});

Language: Tailwind Content vs. Purge settings

The Tailwind content paths configuration is sometimes incorrectly referred to as "purge settings." This term originates from Tailwind v2 and earlier, where the build process generated all possible styles and then "purged" unused ones based on the specified content paths. While the term "purge" is outdated, it persists due to old habits.