Dynamically created classes not available when using 'nuxt build' - tailwindcss nuxtjs

Question

I have a nuxtjs project that I use with tailwindcss.

In that project I generate classes on the fly for negative margins like so:

<div class="mins-1" :class="['-mt-'+ m1*8]"></div>

The entire project works fine locally, but if I run nuxt build; nuxt start; it gets compiled without errors but none of the dynamic classes seem to work.

So I finally found out that the nuxt build process does some css tree shaking, and since these classes are not included anywhere in the dom, they are not included in the css build process.

To test this I have created a hidden div like so:

<div class="hidden -mt-8 -mt-16 -mt-24 -mt-32 -mt-40 -mt-48 -mt-56 -mt-64 -mt-72 -mt-80">ok needed classes</div>

And voila, that will make my project workable after nuxt build since now the classes needed are present in the dom and will be included.

This seems very hacky!

Now to my question:

What would be the proper way to include dynamically created classes in the build process in a nuxtjs project?

UPDATED tailwind.config.js (Did NOT work with JIT MODE turned on!)

const colors = require("tailwindcss/colors")
module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
      // TypeScript
      'plugins/**/*.ts',
      'nuxt.config.ts'
    ],
    // UPDATE: safelist does NOT work in combination with JIT
    options: {
      safelist: ['mt-0', '-mt-8', '-mt-16', '-mt-24', '-mt-32', '-mt-40', '-mt-48', '-mt-56', '-mt-64', '-mt-72', '-mt-80'],
    }
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        emerald: colors.emerald,
        gray: colors.trueGray,
        cyan: colors.cyan
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Answer 1

You can safelist classes with Tailwind CSS version 3. I use HTML components in my CMS and for that I have safelisted a couple of classes!

module.exports = {
darkMode: "class",
content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
],
safelist: [
    'border-l-2',
    'border-blue-500',
    {
        pattern: /(bg|text|border)-(red|green|blue|purple|yellow)-(100|200|300|400|500)/,
    },
    {
        pattern: /(h|w)-(12|16|24|32|48|64|72|96)/,
    },
    'absolute',
    '-mt-9',
    '-ml-9',
    'pl-4',
    'overflow-scroll'
],}

Answer 2

You can try safelist option for PurgeCss config:

// tailwind.config.js
module.exports = {
  purge: {
    // Configure as you need
    content: ['./src/**/*.html'],
    // These options are passed through directly to PurgeCSS
    options: {
      // List your classes here, or you can even use RegExp
      safelist: ['bg-red-500', 'px-4', /^text-/],
      blocklist: [/^debug-/],
      keyframes: true,
      fontFace: true,
    },
  },
  // ...
}

EDIT: Seems like OP is using JIT tailwind mode, safelist is not available right now for this mode. The best way to generate needed classes would be placing some stub file like stub.html somewhere in your source directory, and then add all the needed classes inside this file so tailwind could preemptively generate styles for them.

EDIT2: safelist is now available for jit! But it does not support regular expressions. Because no CSS is generated by default, the safelist has to be a list of complete class names. It’s not possible to safelist a regular expression, because there is no pre-generated list of class names to match against that regular expression.