dynamic classes with tailwindcss and eleventy

Question

I am using eleventy.js with tailwindcss and postcss. In my setup, postcss does not seem to recognise dynamic classes like

md:pl-{{(loop.length-loop.index+1)*2}}

And so I never get them in the final css file. my package.json file has the following

"predev": "rimraf tmp && mkdir -p tmp/assets/css",
"dev": "npm run watch:css && npm run watch:app",
"watch:app": "cross-env NODE_ENV=development eleventy --input=src --output=tmp --serve",
"watch:css": "cross-env NODE_ENV=development postcss src/assets/css/tailwind.css > tmp/assets/css/style.css"

my postcss config looks like so

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

I am using postcss for tailwindcss along with eleventyjs, and so the loop comes from a nunjuncks for loop but the class doesn't show up in the css file generated by tailwind. Is there any way around this?

<a href="{{ title | url }}">
  {% set title = title.split('') %}
    <div class="text-lg md:text-xl uppercase flex flex-row justify-between md:justify-end">
      {% for letter in title %}
        <p class="md:pl-{{(loop.length-loop.index+1)*2}}">
          <span> {{ letter }} </span>
        </p>
      {% endfor %}
    </div>
  </a>

Answer 1

If you're using Tailwind v3.0 or later, or Tailwind 2 with the JIT compiler enabled, you can "safelist" the classes you're using.

// tailwind.config.js
module.exports = {
  // ...

  safelist: [
    {
      pattern: /pl-\d+/,
      variants: ['md'],
    },
  ],

  // ...
}

This will keep all pl utilities in your output CSS, regardless of whether they exist in the source. If you have more information on how long title can be and therefore which classes will be generated, then it's possible to be more specific in your regular expression.

// tailwind.config.js
module.exports = {
  // ...

  safelist: [
    {
      // for example only, adjust this depending on your output
      pattern: /pl-(-2|0|2|4|6|8)/,
      variants: ['md'],
    },
  ],

  // ...
}