¡Estamos hoy de enhorabuena, además del lanzamiento de Tailwind CSS 4.0, también se ha liberado Bricks 1.12! 🎨🧱

🆕 Nuevas funcionalidades

1. 🧩 Componentes (Reutilizables y Personalizables):

   • Ahora puedes crear componentes reutilizables para usarlos en diferentes partes de tu sitio.
   • Personaliza propiedades como textos, imágenes o colores, asegurando un diseño coherente y escalable.
   • Más información sobre componentes

2. 🔄 Mejoras en Query Loop:

   • Se añaden opciones para incluir y excluir datos dinámicos, ofreciendo más flexibilidad y precisión al configurar tus consultas.
   • Detalles aquí

3. 📂 Contenido dinámico en todos los campos:

   • Ahora puedes utilizar datos dinámicos en más campos, ampliando tus posibilidades al personalizar contenido.

🛠️ Mejoras importantes

1. ⚡ Optimización de carga de CSS:

   • El CSS de las páginas se carga ahora de forma optimizada, solucionando problemas de contenido sin estilo y asegurando una experiencia más fluida para los usuarios.

2. 🖌️ Capas en cascada para estilos predeterminados:

   • Implementación de Cascade Layers para manejar problemas de especificidad de CSS, una herramienta experimental para facilitar la gestión de estilos.
   • Aprende más sobre capas en cascada

3. 🎨 Rediseño de estilos en elementos existentes:

   • Mejoras en la interfaz para gestionar estilos y configuraciones con mayor claridad y usabilidad.

📢 Ya disponible para producción: Actualiza directamente desde tu panel de Bricks o descárgalo desde tu cuenta.

📖 Consulta el changelog completo aquí

¡La espera ha terminado! La versión 4.0 de Tailwind CSS ha sido oficialmente lanzada. Esta actualización, junto con todas las increíbles novedades que ya te hemos contado anteriormente, incluye una renovación completa de la web oficial y una documentación totalmente actualizada para que puedas sacarle el máximo provecho a esta nueva versión. 🌐✨

🌟 ¿Qué puedes hacer ahora?

• ✅ Descubre la nueva documentación, diseñada para ayudarte a implementar las últimas características de forma sencilla y eficiente.
• ✅ Explora ejemplos prácticos y detalles sobre cómo Tailwind CSS 4.0 puede transformar tu flujo de trabajo.

📖 Enlace oficial: tailwindcss.com

¡Hola, comunidad! 👋 Lanzamiento de la versión Tailwind CSS 4-beta.10. Esta actualización trae mejoras y correcciones que optimizan aún más tu experiencia de desarrollo. A continuación, te presentamos las novedades más destacadas:

🆕 Novedades

• @variant en CSS: Ahora puedes utilizar @variant para aplicar variantes directamente en tu CSS, facilitando la gestión de estilos condicionales.
• Transiciones de outline-color: Se ha incluido outline-color en las transiciones de color, permitiendo efectos más suaves y coherentes.

🛠️ Correcciones

• Campos main y browser en @tailwindcss/browser: Se han añadido los campos main y browser que faltaban en @tailwindcss/browser, mejorando la compatibilidad con diversas herramientas.
• Escape de *`** **en nombres de variables:** Ahora es posible escapar el carácteren la sintaxis de nombres de variables de tema (por ejemplo:--color-: initial;`).
• Resolución de valores en utilidades funcionales personalizadas: Se ha mejorado la resolución de valores en utilidades funcionales personalizadas, respetando las opciones definidas en @theme.
• Descartar variantes inválidas: Se eliminan variantes inválidas como data-checked-[selected=1]:*, asegurando una generación de CSS más limpia.
• Sugerencias de *`-outline-offset-** **en IntelliSense:** Ahora, las utilidades-outline-offset-*` se sugieren correctamente en IntelliSense, mejorando la experiencia de desarrollo.

Fancy Components, una colección de componentes y microinteracciones listos para usar, diseñados para añadir diversión y singularidad a tus proyectos web. 🎉

¿Qué es Fancy Components?

Fancy Components es una biblioteca de componentes construidos principalmente con:

• React
• TypeScript
• Tailwind CSS
• Motion (anteriormente Framer Motion)

Su objetivo es romper con la homogeneidad del diseño web actual, inyectando elementos interactivos y creativos que hagan que tu sitio destaque. 🌟

Características destacadas:

• Componentes de texto animados: Efectos como rotación de texto, subrayado animado y tipeo.

  Fancy Components

• Fondos interactivos: Gradientes animados y efectos de seguimiento de píxeles.

  Fancy Components

• Efectos de física: Líneas elásticas y simulaciones de gravedad.

• Animaciones de imágenes: Efectos de parallax y seguimiento de cursor.

  Fancy Components

• Bloques dinámicos: Elementos flotantes, pies de página adhesivos y más.

  Fancy Components

¿Por qué elegir Fancy Components?

En un panorama web donde la estandarización ha llevado a diseños monótonos, Fancy Components busca reintroducir la creatividad y el dinamismo en las interfaces de usuario. Ya sea que desees implementar estos componentes directamente o utilizarlos como inspiración, esta colección te ofrece las herramientas para enriquecer tus proyectos. 💡

¿Cómo empezar?

Visita la guía de instalación para integrar fácilmente Fancy Components en tu proyecto.

Fancy Components

Código abierto y gratuito

Fancy Components es una iniciativa de código abierto, disponible para su uso en proyectos personales y comerciales. Las contribuciones son bienvenidas; si tienes ideas o sugerencias, no dudes en participar en su repositorio de GitHub.

¡Dale un toque especial a tu sitio web con Fancy Components! 🚀

Para más información y ejemplos, visita su sitio oficial: fancycomponents.dev

Con fecha prevista de lanzamiento el 20 de enero de 2025. Actualmente, se encuentra en la fase Release Candidate (RC), lo que significa que puedes probar todas las nuevas funcionalidades antes de su debut oficial. 🎉

🆕 Novedades destacadas en WooCommerce 9.6

• ⚙️ Actualización del editor de productos:
  Se ha renovado la interfaz de los editores clásicos de productos y cupones, ofreciendo una experiencia más moderna y eficiente, sin afectar la compatibilidad con extensiones.
• 💳 Interfaz de configuración de pagos modernizada (Beta):
  Una nueva interfaz basada en React para gestionar métodos de pago. Activa la opción reactify-classic-payments-settings con el plugin WooCommerce Beta Tester para probarla.
• 🛡️ Mejoras en la API de la tienda:
  Se introduce un sistema configurable para limitar la frecuencia de solicitudes, protegiendo contra ataques de denegación de servicio y pruebas de tarjetas.
• 🔒 Interfaz de registro remoto:
  Ahora es más sencillo gestionar funciones de privacidad gracias a un control independiente en WooCommerce > Ajustes > Avanzado > Funciones.
• 📏 Manejo mejorado de unidades de medida:
  Las unidades de medida ahora se ajustan automáticamente según la ubicación de la tienda al configurar WooCommerce por primera vez.
• 📝 Mejoras en el bloque de resumen de producto:
  Nuevas opciones para personalizar el estilo de texto, agregar un enlace de "Leer más" y manejar el truncamiento de descripciones.
• 🔍 Ampliaciones en la API REST para productos:
  Se han añadido parámetros avanzados de filtrado en el endpoint /products para consultas más específicas.

Este video profundiza en la idea central de "Don’t Make Me Think" de Steve Krug: la importancia de mantener la simplicidad en el diseño web. Descubre cómo hacer que las cosas sean fáciles de usar no solo mejora la experiencia del usuario, sino que puede transformar completamente tus proyectos. 🚀

¿Sabías que no todos los "frameworks CSS" son realmente lo que parecen? 🤔 En nuestro último artículo del blog, desglosamos las características, funcionalidades y diferencias clave entre los verdaderos frameworks CSS y los llamados "frameworks basados en tokens". 🚀

🔎 ¿Qué encontrarás en este artículo?

• Qué es realmente un framework CSS y cómo funciona.
• Diferencias con los sistemas basados en tokens CSS.
• Ejemplos claros para entender cómo elegir la mejor opción según tus necesidades.
• Ventajas y desafíos de cada enfoque en el desarrollo web moderno.

🎯 Si estás buscando claridad para optimizar tu flujo de trabajo o simplemente quieres profundizar en este tema, ¡este artículo es para ti!

👉 Léelo aquí: Frameworks CSS: Características, funcionalidades y diferencias

No olvides dejar tus comentarios y compartir tus experiencias. ¡Nos encanta saber cómo estás aprovechando estas herramientas en tus proyectos! 🙌

Estamos probando una combinación de herramientas increíbles con Tailwind CSS 3 para evaluar su integración en nuestro sistema de diseño. Queremos explorar cómo pueden mejorar nuestro flujo de trabajo y las experiencias que ofrecemos. Aquí están las herramientas que estamos utilizando:

• 🌗 Nightwind: Para gestionar automáticamente el modo oscuro y simplificar la implementación de temas.
• 🎥 Tailwind Motion: Añadiendo animaciones suaves y personalizables directamente desde el framework.
• 🖱️ Tailwind Intersect: Experimentando con efectos dinámicos basados en el scroll para crear interacciones más inmersivas.

Nuestro objetivo es explorar estas capacidades y valorar cómo encajan en un sistema de diseño escalable y consistente. 💻🎨

¿Alguien ya ha trabajado con estas herramientas? Nos encantaría conocer sus opiniones y casos de uso. 🙌

👉 Si los resultados son positivos, compartiremos detalles sobre cómo podrían integrarse estas herramientas en proyectos futuros. ¡Sigamos empujando los límites del diseño web juntos! 🚀✨

La versión beta 4.0.0-beta.9 de Tailwind CSS ya está aquí, repleta de mejoras para optimizar el desarrollo web moderno. 🚀💻

🔥 Novedades destacadas:

• 🌐 Ejecución en el navegador: Se ha introducido el paquete @tailwindcss/browser, que permite ejecutar Tailwind CSS directamente en el navegador, facilitando la experimentación y el prototipado.
• 📚 Nueva API @reference: Esta API reemplaza la opción anterior @import "…" reference, ofreciendo una forma más eficiente de importar configuraciones de Tailwind CSS.
• 🎨 Soporte para utilidades funcionales en CSS: Ahora es posible definir utilidades funcionales directamente en los archivos CSS, brindando mayor flexibilidad y control sobre los estilos.
• 🛠️ Nuevas funciones CSS: Se han añadido las funciones --spacing(…), --alpha(…) y --theme(…), ampliando las capacidades de personalización.
• ⚡ Mejoras en el rendimiento: Las optimizaciones en las manipulaciones internas del AST han resultado en un flujo de trabajo más ágil y eficiente.

🛠️ Correcciones implementadas:

• ✔️ Se han ajustado los valores de las propiedades para las utilidades place-content-between, place-content-around y place-content-evenly, asegurando su correcto funcionamiento.
• 🛡️ Se ha corregido la detección de propiedades arbitrarias precedidas por un carácter de escape, mejorando la precisión en la generación de estilos.
• 📝 Las utilidades bg-round y bg-space se han renombrado como bg-repeat-round y bg-repeat-space, respectivamente, alineándolas con la nomenclatura estándar.
• 💡 Se han solucionado sugerencias incorrectas en IntelliSense para inset-shadow-*, mejorando la asistencia en la codificación.
• 🔄 Se ha garantizado que las reglas @apply se procesen en el orden correcto, preservando la coherencia en la aplicación de estilos.

📖 Para una descripción completa de todos los cambios, consulta el changelog oficial.

El próximo martes 21 de enero, se organiza un meetup especial para la comunidad de Tailwind CSS en Mindspace Wynwood.

🎉 ¿Que es loq ue se comentará?

• Demo de las novedades en Tailwind CSS v4.0.
• Sesión interactiva de preguntas y respuestas.
• Pizza, bebidas y mucho tiempo para conectar con otros desarrolladores.

🕕 Cuándo: Martes 21 de enero, 6:00 PM
📍 Dónde: Mindspace Wynwood, Miami
🎟️ Inscripciones: https://lu.ma/foeqxyz7