Para aprovechar al máximo Tailwind, necesitas un paso de compilación. Es la única forma de poder personalizar tu archivo tailwind.config.js, extraer componentes con @apply, o incluir plugins.
Esto no es un problema si ya te has comprometido con el framework, pero si solo estás tratando de probarlo por primera vez, es mucha fricción. O tienes que configurar un entorno de desarrollo local con soporte para PostCSS, o ceñirte a la compilación estática de CDN, lo que significa que pierdes muchas funciones geniales.
Así que hoy estamos emocionados de lanzar la primera versión de Tailwind Play, un playground online avanzado para Tailwind CSS que te permite usar todas las funciones de tiempo de compilación de Tailwind directamente en el navegador.
Incluye soporte para todas las funciones más geniales de Tailwind, además de un montón de cosas que son incluso mejores en Tailwind Play que en tu editor, como:
- Personalizar tu tema de Tailwind
- Habilitar variantes especiales, como
group-hoverofocus-within - Usar directivas personalizadas en tu CSS como
@apply,@variants, y@responsive - Añadir plugins como
@tailwindcss/typography - Autocompletado inteligente de código y linting
- Modo de diseño Responsive
- Compartir con un solo clic
El autocompletado de código incluso actualiza la vista previa renderizada en tiempo real, lo que crea un flujo de trabajo de diseño increíble en el navegador: ¡simplemente navega a través de diferentes utilidades de padding con las teclas de flecha, por ejemplo, para encontrar el valor perfecto sin siquiera guardar el archivo o presionar enter!
Nuestro modo de diseño Responsive te permite ajustar el viewport mientras trabajas en tu diseño, tal como puedes hacerlo en Chrome DevTools. Incluso puedes arrastrar el viewport más allá del espacio disponible, y el área de vista previa se alejará automáticamente, permitiéndote diseñar para pantallas más grandes incluso cuando tienes espacio limitado.
Compartir con un solo clic es realmente eso: ni siquiera necesitas crear una cuenta. Haz clic en "Share" e inmediatamente tienes un enlace a una instantánea de lo que estás trabajando que puedes compartir en línea.
Échale un vistazo en play.tailwindcss.com y ¡cuéntanos qué piensas!
¿Quieres hablar sobre esta publicación? Discútelo en GitHub →