带有tailwindcss和十一的动态类答案

【问题标题】：dynamic classes with tailwindcss and eleventy带有tailwindcss和十一的动态类
【发布时间】：2022-11-12 08:23:26
【问题描述】：

我正在使用带有 tailwindcss 和 postcss 的 110.js。在我的设置中，postcss 似乎无法识别动态类，例如

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

所以我从来没有把它们放在最终的 css 文件中。我的package.json 文件有以下内容

"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"

我的 postcss 配置看起来像这样

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

我正在将 postcss 用于 tailwindcss 和十一，因此 loop 来自 nunjuncks for 循环，但该类未显示在由 tailwind 生成的 css 文件中。有没有办法解决？

<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>

【问题讨论】：

标签： javascript frontend tailwind-css postcss eleventy

【解决方案1】：

如果您使用的是 Tailwind v3.0 或更高版本，或者启用了 JIT 编译器的 Tailwind 2，您可以"safelist" the classes you're using。

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

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

  // ...
}

这将在您的输出 CSS 中保留所有 pl 实用程序，无论它们是否存在于源代码中。如果您有更多关于title 可以持续多长时间以及将生成哪些类的信息，那么可以在您的正则表达式中更具体。

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

  // ...
}

【讨论】：

【解决方案2】：

www.knowcss.com 无需配置即可实时执行此操作.. 它会扫描 know=“” 并自动转换为类并注入 css.. 在 DOMContentLoad 上 <10ms 毫秒内没有 CLS

【讨论】：

标记为垃圾邮件。