带有tailwindcss和eleventy的动态类

Question

我使用的是带有tailwindcss和postcss的eleventy.js。在我的设置中，postss似乎无法识别像这样的动态类

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"

我的postpass配置看起来像

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

我将postcss和elementyjs一起用于tailwindcss，因此loop来自nunjuncksfor循环，但该类没有显示在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>

Answer 1

如果您使用的是Tailwind v3.0或更高版本，或启用JIT编译器的Tailwind2，您可以"安全列表"；您正在使用的类。

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