Tailwind dynamic class not working

[Sennik]

I am pulling my hair out here...

In tailwind.config.js I have:

  theme: {
    extend: {
      colors: {
        primary: {
          light: '#D0E8F9',
          DEFAULT: '#9ACCF1',
          medium: '#3A9CE4',
          dark: '#1667A3',
        },
      },
    },
  },

In Statamic CP I have a field 'hero_theme' list with the options:

** These are the handles **

• primary
• primary-light (ex. selected)
• primary-medium
• primary-dark

In the view I have:

<div class="relative pt-24 bg-{{ hero_theme }}">
...
</div>

When inspecting the source it shows (as expected in this example):

<div class="relative pt-24 bg-primary-light">
...
</div>

But it does not show the background color belonging to the hero_theme I selected (#D0E8F9).

When I replace bg-{{ hero_theme }} by 'bg-primary-light' in the antlers template (it is a set template which is pulled in in a bard field) it works!?

I am using Laragon as the development environment at the moment. Also tried on my dedicated development server (Ubuntu 18.04 with Apache), both have the same issue. I suspect this has do something with antlers or caching but I really am pulling my hair out after a day fiddling around with this. How is it possible that this can happen and how do I fix this?

[JohnathonKoster]

Sounds like the dynamic classes may be getting purged by something like PurgeCSS. In your tailwind.config.js, do you have a purge section similar to this?

module.exports = {
    // ...

    purge: {
        content: [    
            './resources/**/*.antlers.html',
            './resources/**/*.blade.php',
            './content/**/*.md'
        ],
    }
}

If so, you should be able to exclude specific the bg- classes like so (tested with Cool Writings Starter Kit setup):

module.exports = {
    // ...

    purge: {
        content: [    
            './resources/**/*.antlers.html',
            './resources/**/*.blade.php',
            './content/**/*.md'
        ],
        options: {
            whitelistPatterns: [/^bg-/]
        }
    }
}

Additional links that may help depending on your Tailwind version, and other setup:

• https://tailwindcss.com/docs/optimizing-for-production#purge-css-options
• https://purgecss.com/configuration.html

[Sennik]

Thanks John! this is definitely the right direction! Can't get patterns to work though. I also had to use safelist:

  purge: {
    content: [
      './resources/**/*.antlers.html',
      './resources/**/*.blade.php',
      './content/**/*.md'
    ],
    safelist: [
      // /^bg-/ //Does not work!
      'bg-primary-light', // Works
      'bg-primary', // Works
      'bg-primary-medium', // Works
      'bg-primary-dark', // Works
      // /$bg-/ //Does not work!
    ],
    options: {

    }
  },

I am really struggling with tailwind (I know this has nothing to do with it essentially). I'm not sure I like the approach of it over Bootstrap.

[duncanmcclean]

If you'd prefer to use Bootstrap, you can! You're not tied in with Tailwind - just get rid of the config file, remove the Tailwind dependency and install Bootstrap instead.

(that's how I would do it - using the safelist for classes that are dynamic)

[Jerga99]

In tailwind3, https://tailwindcss.com/docs/content-configuration#safelisting-classes

Try this:

content: ['your_content'],
safelist: [
    {
      pattern: /bg-/,
      variants: ['lg', 'hover', 'focus', 'lg:hover'],
    }
],

[jasonvarga]

I don't think the regex will work because tailwind is going to look at your templates, not the rendered pages.
The templates will only ever have bg-{{ something }} in them. Tailwind is never going to be able to know what the {{ something }} could be.

This is essentially what's explained here: https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Adding the specific options to the safelist would be the way to go.