Using Tailwind Classes in CMS Content without Browser compilation

Tailwind's PurgeCSS optimizes CSS by including only classes found in PHTML templates. This means arbitrary Tailwind classes cannot be used directly in CMS content without additional configuration.

Strategies

1. Declare Custom Classes for CMS Editors

Define custom CSS classes using @apply in your stylesheet. These classes can then be used in CMS content.

In CSS:

.huge {
    @apply text-5xl
    @apply font-bold
}

In CMS Content:

<span class="huge">HELLO</span>

2. Safelist Desired Tailwind Classes in tailwind.config.js

Prevent PurgeCSS from removing specific Tailwind classes by adding them to the safelist array in your Tailwind configuration file (web/tailwind/tailwind.config.js).

Example: To prevent padding and margin classes from being purged:

module.exports = {
  // ...
  purge: {
    content: [
      '../../**/*.phtml',
      './src/**/*.phtml'
    ],
    // These options are passed through directly to PurgeCSS
    // When using the Tailwind JIT compiler ONLY FULL CLASS NAMES work.
    // When using the legacy Tailwind AOT compiler, either full class names or regexes can be used
    options: {
      safelist: ['top-10', /^bg-opacity-/, /^-?[mp][trblxy]?-[4,8]$/, /^text-shadow/],
    },
  },
  // ...
}

3. Include a Safelist File in Purge Content

As an alternative to the safelist option, create a safelist.txt file containing all desired class names. Then, add this file to the content section of your tailwind.config.js to prevent these classes from being purged.