Hoy compartimos dos herramientas visuales súper prácticas para quienes trabajan con transformaciones en CSS y quieren aplicar perspectiva 3D de forma rápida y precisa 💡

🎯 Lo mejor: el código que generan es muy fácil de convertir en clases utilitarias de TailwindCSS. Ideal para prototipar, testear y ajustar estilos sin romperte la cabeza con los valores.

🔹 CSS Transform Generator
https://css-transform.moro.es/
Permite jugar visualmente con transformaciones (translate, rotate, scale) y ver cómo afecta a tus elementos. Muy intuitiva y directa.

🔹 Generate CSS Transform
https://front-end-tools.com/en/generateTransform/
Ofrece una interfaz más completa para trabajar con transformaciones 3D y perspectiva, con control total sobre los ejes.

🛠️ ¿Para qué sirve esto?
Perfecto para quienes están maquetando componentes interactivos, animaciones suaves o interfaces con efecto depth. También útil para crear prototipos realistas o microinteracciones atractivas.

💬 Si usás alguna de estas herramientas o conocés alguna mejor, ¡te leemos en los comentarios!

Quiero compartir con vosotros un atajo poco conocido pero súper útil al usar el plugin Windpress.

🧠 Ahora es posible regenerar la caché directamente desde el editor, sin necesidad de cambiar de pestaña ni tocar la terminal.

👉 Solo presioná:
⌘ + J (o Ctrl + J en Windows/Linux)
Y automáticamente se ejecuta la regeneración de caché ⚙️🚀

Este pequeño detalle mejora mucho la experiencia, sobre todo cuando estás haciendo pruebas rápidas o iterando en el diseño con Tailwind.

La última actualización viene cargada de novedades que te van a encantar 😍:

✨ Nuevas utilidades de sombras de texto (text-shadow): Ahora puedes añadir sombras a tus textos con clases como text-shadow-2xs hasta text-shadow-lg. Ideales para resaltar encabezados sobre fondos llamativos. Además, puedes personalizar el color de la sombra con text-shadow-<color>. ¡Dale un toque especial a tus textos! 🖋️

🎭 Utilidades de máscara (mask-): Usa imágenes y degradados como máscaras para ocultar partes específicas de un elemento. Esto abre un abanico de posibilidades creativas en tus diseños. 🎨

🌐 Mejor compatibilidad con navegadores antiguos: Tailwind CSS 4.1 ha mejorado la degradación en navegadores más antiguos, asegurando que tus diseños se vean bien en una amplia gama de dispositivos y navegadores. 🖥️📱

🔤 Control avanzado de ajuste de texto con overflow-wrap: Protege tus diseños de palabras largas que puedan desbordar, asegurando que el contenido se ajuste correctamente sin romper la maquetación. 📝

🌈 Soporte para sombras de drop con color: Ahora puedes aplicar sombras de drop con colores personalizados, añadiendo profundidad y estilo a tus elementos. 🎨

🖱️ Targeting de dispositivos de entrada con pointer-* y any-pointer-*: Adapta tus diseños específicamente para dispositivos táctiles o con puntero, mejorando la experiencia del usuario según el dispositivo. 📱🖱️

📏 Alineación de elementos a la última línea base: Con las nuevas utilidades items-baseline-last y self-baseline-last, puedes alinear elementos flex o grid a la línea base de la última línea de texto. 📐

🔒 Alineación segura del contenido: Centra contenido en diseños flex y grid sin preocuparte de que desaparezca cuando hay poco espacio disponible. 🔐

📂 Ignorar rutas específicas con @source not: Excluye directorios irrelevantes para acelerar aún más tus compilaciones. ⚡

📜 Incluir clases específicas con @source inline(…): Fuerza a Tailwind a incluir clases que no están en tus archivos fuente, asegurando que todas las utilidades necesarias estén presentes. 🛠️

📌 Podés leer todos los detalles (y ejemplos) en el blog oficial: 👉 https://tailwindcss.com/blog/tailwindcss-v4-1

¿Ya la probaste? ¿Qué te parece esta nueva versión? Te leo en los comentarios 👇

El plugin sigue mejorando y esta vez viene con novedades interesantes tanto para usuarios de Tailwind 4 como quienes aún trabajan con Tailwind 3 🚀

📦 Cambios en la nueva versión:

🆕 Actualización a Tailwind CSS v4.1.1
➡️ ¡Ahora totalmente compatible con la última versión estable de Tailwind! 🌀

⌨️ Atajos de teclado
🔧 Se han añadido accesos rápidos para Generar Caché directamente desde el panel de WindPress. Más agilidad para tu flujo de trabajo ⚡

⚙️ Mejoras en el rendimiento del compilador (TW3)
🔁 Optimización del Play Observer / Compiler para quienes siguen utilizando Tailwind 3. Más estable, más rápido.

📣 ¡Una actualización pensada para mejorar la experiencia en todos los frentes!

Para quienes hemos trabajado con Woostify en la creación de tiendas en línea, es emocionante ver cómo este tema sigue evolucionando. Recientemente, han lanzado su nuevo Theme Builder, una herramienta que promete transformar la personalización de nuestras tiendas WooCommerce. ​

✨ Características destacadas del Theme Builder:

• 🛠️ Constructor de cabeceras y pies de página personalizados: Diseña estas secciones clave de tu tienda según tus necesidades específicas.​
• 📄 Creación de contenido y hooks personalizados: Añade contenido dinámico y puntos de enganche sin complicaciones.​
• 🎯 Constructor de popups: Implementa ventanas emergentes para promociones, captación de leads o anuncios especiales.​
• 🖌️ Plantillas de página personalizadas: Desarrolla diseños únicos para diferentes secciones de tu tienda.​

Una de las novedades más destacadas es la integración con Gutenberg, lo que facilita la personalización sin necesidad de conocimientos avanzados de programación. ​

Dado que muchos en nuestra comunidad utilizamos Tailwind CSS para el diseño, surge la pregunta sobre su compatibilidad con este nuevo Theme Builder. Aunque no hay información oficial al respecto, sería interesante explorar cómo podrían integrarse ambas herramientas para potenciar nuestras tiendas en línea.​

Es un momento oportuno para redescubrir Woostify y evaluar cómo su nuevo Theme Builder puede encajar en nuestros flujos de trabajo actuales.

🔗 Mas información: https://woostify.com

La nueva versión de Tailwind CSS introduce una serie de mejoras y utilidades que amplían las posibilidades de diseño. Aquí te presentamos las más destacadas:​

🆕 Nuevas variantes y utilidades:

• details-content: Permite estilizar el contenido dentro de elementos <details>.​
• inverted-colors: Facilita la inversión de colores, útil para modos oscuros o temáticas específicas.​
• noscript: Aplica estilos cuando JavaScript está deshabilitado en el navegador.​
• items-baseline-last y self-baseline-last: Nuevas opciones de alineación para flexbox.​
• pointer-* y any-pointer-*: Detecta y aplica estilos según el tipo de dispositivo apuntador (fino, grueso, ninguno).​
• user-valid y user-invalid: Estiliza elementos basados en la validez de la entrada del usuario.​
• wrap-anywhere, wrap-break-word y wrap-normal: Controlan el comportamiento de ruptura de palabras en textos.​
• *`text-shadow-`**: Añade sombras al texto con mayor facilidad.​
• *`mask-`**: Introduce utilidades para aplicar máscaras a elementos.​
• *`bg-{position,size}-`**: Permite establecer posiciones y tamaños de fondo con valores arbitrarios.​
• Control de opacidad en sombras: Ahora puedes ajustar la opacidad en shadow-*, inset-shadow-*, drop-shadow-* y text-shadow-*.​

Estas incorporaciones ofrecen una mayor flexibilidad y control en el diseño de interfaces, permitiéndote crear experiencias más ricas y adaptativas.​

Para más detalles y ejemplos de uso, puedes consultar el changelog oficial.

La reconocida biblioteca de componentes basada en Tailwind CSS se renueva con una actualización que potenciará tus desarrollos web.​

🔝 Novedades destacadas:

• 🌀 Compatibilidad total con Tailwind CSS v4: Aprovecha al máximo las últimas funcionalidades y mejoras de rendimiento de la nueva versión de Tailwind.​

• 🆕 Nuevos componentes:

  • 🔍 Filter: Facilita la implementación de filtros en tus interfaces.​
  • 📊 Status: Permite mostrar estados de manera clara y efectiva.​

• 🎨 Incorporación de nuevos temas: Personaliza tus proyectos con estilos como Black, Mintlify, Shadcn, Slack y Valorant, ofreciendo una variedad estética más amplia.​

• ⚙️ Mejoras en componentes existentes: Se han añadido nuevas opciones y tamaños a elementos como Accordion, Alert, Button, Card, Input, entre otros, brindando mayor flexibilidad y personalización.

Para más detalles, puedes consultar el changelog completo.

Joshua no para y seguimos viendo actualizaciones frecuentes que mejoran la estabilidad y amplían posibilidades 🔁💪

📦 Últimas versiones: 🆕 v3.3.22
🔧 Se soluciona un problema de almacenamiento relacionado con la función Incremental Generate Cache (#34)

🆕 v3.3.21
🌍 El plugin ahora es totalmente traducible (experimental).
Desde Flowtitude nos encargamos de que la traducción al español esté siempre actualizada y lista para usar 🇪🇸

⚡ Si estás usando WindPress en tu flujo de trabajo con Bricks + Tailwind, ¡mantente atento! Las mejoras no paran.

El plugin sigue evolucionando, y esta vez ha dado un buen salto: de la v3.3.12 a la v3.3.20 🚀

🔧 ¿Qué hay de nuevo?

• 🌀 Actualización a Tailwind CSS v4.0.17, la última versión estable.
• 🌍 El plugin ahora es totalmente traducible.

📢 Desde Flowtitude nos encargamos de mantener la traducción al español siempre al día, para que puedas trabajar en tu idioma sin complicaciones 📘

📌 ¿Y los saltos de versión?
Tranquilidad: a veces ocurre que versiones intermedias contienen errores o ajustes internos y simplemente no se publican. Solo se lanza lo que está listo y estable 💪

Así que si ves números "saltados", ¡es por una buena razón!

🛠️ ¿Qué cambia?

• 🐛 Se ha corregido un bug que hacía que la CLI se quedara colgada al procesar archivos Ruby.

📌 Importante: Esta corrección no afecta en nada a nuestro flujo de trabajo en WordPress (Bricks, WindPress, etc.), ya que no usamos archivos Ruby ni pipelines relacionados. Es una mejora puntual para entornos que sí trabajan con Ruby en el backend.

✅ Así que podemos seguir trabajando con total normalidad. Esta actualización es simplemente informativa para quienes estén al tanto de cada release.

🔗 Changelog oficial: https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.17