Using Tailwind Classes in CMS Content without Browser compilation

Warning

This page is deprecated since the hyva-themes/magento2-cms-tailwind-jit was released, which takes care of compiling the Tailwind CSS for CMS content automatically.

If you use the cms-tailwind-jit module, then do not follow the instructions on this page.

We are keeping this page around for sites not using the CMS tailwind jit compiler module.

Tailwind uses PurgeCSS to compile CSS with only the classes that are actually needed. These are determined by the PHTML templates in the theme directory.
You cannot use arbitrary CSS classes in CMS content.

Strategies

Declare custom classes for CMS editors

In CSS

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

In CMS

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

Declare desired Tailwind classes in the tailwind.config.js safelist

This is done in the Tailwind configuration at web/tailwind/tailwind.config.js.

For example, the following configuration prevents all 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/],
    },
  },
  // ...
}

Warning

Regular expressions as safelist values only work with the legacy AOT Tailwind CSS compiler that will be removed with Tailwind CSS v3. In order to be upgrade safe, prefer specifying a list of full class names.

Specify desired classes in a file included in the purge content list

Instead of configuring the safelist option in the tailwind.config.js, an alternative approach is to create a safelist.txt file into which you throw in all the classnames you want to protect from being purged.
Then add that text-file to the purge list (in the content section of the tailwind.config.js file).

Tip

The object structure for specifying the content sources and the safelist for Tailwind v2 and Tailwind v3 is different.
Be sure to choose the correct format, depending on the Tailwind version used in your theme.
Please refer to the Tailwind CSS documentation for more information.