Tailwind Content settings

A typical stylesheet for a Hyvä Theme is about 100kb (that’s ~17kb over the wire due to HTTP compression).

This is because Tailwind only compiles the CSS actually used within a theme.

Because Tailwind needs to know which classes are used, we need to point the build script to the directories where our .phtml files are located. Typically, that would be app/design/frontend/Acme/default/templates/.

If you have .phtml files with Tailwind CSS classes in app/code or vendor/, these directories have to be included in your tailwind configuration, too.

Hyvä 1.1.15 and newer

Since release 1.1.15 of the hyva-themes/magento2-theme-module the file app/etc/hyva-themes.json is used to automatically include relevant modules in the purge content paths configuration.
The file regenerated automatically each time a module is enabled or disabled.

If necessary, it can be manually generated, too, using the command

bin/magento hyva:config:generate

Once a module is included in the list, it's templates will automatically be scanned for Tailwind CSS classes.

Hyvä 1.1.14

Since release 1.1.14 of the hyva-themes/magento2-theme-module the file app/etc/hyva-themes.json is used to automatically include relevant modules in the purge content paths configuration.
The configuration file has to be regenerated each time a Hyvä compatibility module is installed or removed.

bin/magento hyva:config:generate

Once a module is included in the list, it's templates will automatically be scanned for Tailwind CSS classes.

Hyvä 1.1.13 and before

Themes up to Hyvä release 1.1.13 have to ensure all classes are found by including all relevant paths manually in the theme purge content configuration.
Alternatively, we recommend upgrading the hyva-themes/magento2-theme-module to 1.1.14 or newer and using the automatic tailwind purge content config merging.

Otherwise, manually add the module paths to the themes purge content configuration as described below under Purge Content Details.

Content Path Details

The Tailwind configuration for the paths to scan can be found in your themes web/tailwind/tailwind-source.css file. For example, app/design/frontend/Acme/default/web/tailwind/tailwind-source.css.

The default configuration looks like this:

@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 of "./generated/hyva-source.css" contains all the generated list of paths to Hyvä compatibility modules and includes specified in the hyva.config.json (such as parent themes).

Hyvä 1.3.x with Tailwind v3

The content configuration can be found in your themes tailwind.config.js file, for example app/design/frontend/Acme/default/web/tailwind/tailwind.config.js.

Note that the configuration is not limited to .phtml templates. For example, layout XMl files might reference Tailwindcss classes, too, and can also be included in the content configuration.

Tailwind v3 config example

```js
module.exports = {
  ...
  content: [
    // this theme's phtml files
    '../../**/*.phtml',
    // parent theme in vendor/
    '../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
    // hyva theme-module templates
    '../../../../../../../vendor/hyva-themes/magento2-theme-module/src/view/frontend/templates/**/*.phtml',
  ]
}
```

Please check out this excellent blog post on the topic of programmatically built tailwind class names and the purge process by Luke Collymore for more useful information: www.develodesign.co.uk/learn/hyva-missing-sites-in-production-build

Language: Tailwind Content vs. Purge settings

Sometimes the Tailwind content paths configuration is referred to as the "purge settings".
This expression goes back to Tailwind v1 and earlier, where the script generated all possible styles and then "purged" all that weren't actually used in files within the specified content path.

Using "purge" hasn't been the correct expression for many years, but old habits die hard.