Obtengo un comportamiento realmente inconsistente con la funcionalidad de valor arbitrario de los vientos de cola, específicamente en relación con la propiedad de retardo de transición. Cuando uso cualquier valor aleatorio directamente dentro del valor arbitrario, ha funcionado para cada valor que he probado hasta ahora (enteros positivos aleatorios). Ex...
<li className="delay-[2455]">{some text}</li>Pero si tuviera que usar una variable, la clase solo ocasionalmente tendrá algún efecto dependiendo del valor, aparentemente al azar. Ex...
const delay = "250ms"; return <li className={`delay-[${delay}]}`></li>Este segmento de arriba producirá una clase válida pero el segmento de abajo no tendrá ningún efecto y no producirá una clase válida
const delay = "500ms"; return <li className={`delay-[${delay}]}`></li>No estoy seguro de si esto es algo que estoy haciendo mal o es una peculiaridad extraña en el viento de cola. Estoy abierto a cualquiera y todas las sugerencias. Si hace la diferencia, estoy usando mecanografiado junto con reaccionar. Estoy usando tailwindcss versión 3.0.11 y postcss versión 8.4.5 Estos son mis archivos tailwind.config.js y postcss.config.js
module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}",], theme: { extend: { screens: { '3xl': '1920px', 'xsm': '428px', '2xsm': '360' }, fontFamily: { title: ['Patrick Hand'], body: ['Balsamiq Sans'] }, transitionProperty: { 'opacity': 'opacity', }, }, }, plugins: [], } module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }Directamente desde los documentos:
La implicación más importante de cómo Tailwind extrae los nombres de las clases es que solo encontrará las clases que existen como cadenas completas e ininterrumpidas en sus archivos de origen.
Si utiliza interpolación de cadenas o concatena nombres de clases parciales, Tailwind no los encontrará y, por lo tanto, no generará el CSS correspondiente.
Significa que necesita usar el nombre completo de la clase, no la concatenación dinámica de sus partes.
Por ejemplo, puedes hacer una función como esa:
function getClassByDelay(delay) { return { 250: 'delay-250', 500: 'delay-500', 750: 'delay-750', }[delay] } Y utilícelo así: <li className={getClassByDelay(delay)}></li>
Si realmente necesita usar clases dinámicas, también puede usar otro enfoque: simplemente agréguelas a la matriz de safelist en la configuración:
// tailwind.config.js module.exports = { content: [ // ... ], safelist: [ 'delay-250', 'delay-500', 'delay-750', // etc. ] // ... } De esa manera, Tailwind sabrá que necesita generar estas clases de safelist de todos modos, independientemente de si las encuentra en su código fuente o no.
Obviamente, tiene la desventaja de que debe administrar esta lista y no olvidar eliminar las clases no utilizadas de la configuración si deja de usarlas en el código; de lo contrario, serán un peso muerto en su paquete.
Más información: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth