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: [],
}

What is your version of tailwind ?

kissu
– kissu

2021-04-22 12:42:55 +00:00
Commented Apr 22, 2021 at 12:42 — kissu
– kissu, Commented Apr 22, 2021 at 12:42
Latest 2.1.1 unsing @nuxt/tailwindcss 4.0.3

mahatmanich
– mahatmanich

2021-04-22 13:00:47 +00:00
Commented Apr 22, 2021 at 13:00 — mahatmanich
– mahatmanich, Commented Apr 22, 2021 at 13:00

Somil Singhai · Accepted Answer · 2022-01-17 13:52:11Z

3

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'
],}

answered Jan 17, 2022 at 13:52

Somil Singhai

614 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Danila · Accepted Answer · 2022-01-17 13:51:59Z

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.

edited Jan 17, 2022 at 13:51

answered Apr 22, 2021 at 12:06

Danila

19k2 gold badges58 silver badges80 bronze badges

5 Comments

mahatmanich Over a year ago

see my updated tailwind css file with options safelist, that did not work ...

Danila Over a year ago

It won't work if you are using JIT which you did not mention in the post. With JIT the best way you can do right now is to place some stub file like stub.html somewhere with all the classes you need to generate in advance

mahatmanich Over a year ago

Ok I removed jit and now it works, great! So it is either fast development and adding a stub file, or removing jit and have a safelist if I understand you correctly?

Danila Over a year ago

Right now yes, but keep an eye on the docs, I'm sure tailwind team will add some way to generate classes for JIT mode too

mahatmanich Over a year ago

Thank you for your TIME to explain the problem!

mahatmanich · Accepted Answer · 2021-04-22 15:05:13Z

-1

It seems that you're not using tailwind's JIT, give it a look: it will help you during local development and generate only the needed classes.

https://tailwindcss.com/docs/just-in-time-mode

Then, your config file should look something like this

module.exports = {
  mode: 'jit',
 // These paths are just examples, customize them to match your project structure
 purge: [
   './public/**/*.html',
   './src/**/*.{js,jsx,ts,tsx,vue}',
 ],
 ...
}

Disclaimer, I did not try it myself (yet) but this should work fine. Even if IMO, dynamic classes are only to be used with JIT enabled.

edited Apr 22, 2021 at 15:05

mahatmanich

11k5 gold badges69 silver badges88 bronze badges

answered Apr 22, 2021 at 13:48

kissu

47.3k16 gold badges94 silver badges197 bronze badges

5 Comments

mahatmanich Over a year ago

I am using jit in nuxtjs config, but it did not help.

kissu Over a year ago

What about the rest (purge key containing an array).

kissu Over a year ago

Can you give more debugging details?

mahatmanich Over a year ago

I also believe that you did not fully understand my issue ...

kissu Over a year ago

I did, just did not spent more time digging into the configuration issues. Also, I kinda prefer using windy. Glad you found a solution.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

5 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related