Estoy usando eleventy.js con tailwindcss y postcss. En mi configuración, postcss no parece reconocer clases dinámicas como
md:pl-{{(loop.length-loop.index+1)*2}} Y entonces nunca los obtengo en el archivo css final. mi archivo package.json tiene lo siguiente
"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"mi configuración postcss se ve así
module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } Estoy usando postcss para tailwindcss junto con eleventyjs, por lo que el loop proviene de nunjuncks for loop pero la clase no aparece en el archivo css generado por tailwind. ¿Hay alguna forma de evitar esto?
<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>Si usa Tailwind v3.0 o posterior, o Tailwind 2 con el compilador JIT habilitado, puede "listar en una lista segura" las clases que está usando .
// tailwind.config.js module.exports = { // ... safelist: [ { pattern: /pl-\d+/, variants: ['md'], }, ], // ... } Esto mantendrá todas las utilidades pl en su CSS de salida, independientemente de si existen en la fuente. Si tiene más información sobre qué tan largo puede ser el title y, por lo tanto, qué clases se generarán, entonces es posible ser más específico en su expresión regular.
// 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'], }, ], // ... }