No necesitas esto para crear un sitio. Es para quien ya conoce las clases utilitarias al estilo Tailwind y quiere un cambio que la barra de herramientas no ofrece.
Actualizado el
Remake guarda los estilos como clases. La barra de herramientas las escribe por ti, pero también puedes editar la lista de clases directamente.
Selecciona el bloque.
Abre Resumen en la barra de herramientas.
Busca el bloque en la lista.
Abre el menú de tres puntos de su fila y elige Editar clases manualmente.
Añade tus clases a la Lista de clases, separadas por espacios.
Elige Guardar cambios.
La lista también puede contener marcadores de Remake como x-btn:primary. No son clases de Tailwind. Son la forma en que Remake aplica un estilo base o una variación. Déjalos donde están salvo que quieras quitar ese estilo.
La entrada Página edita el cuerpo de la página. Es útil para un fondo que abarque toda la página o para overflow-x-hidden cuando un elemento decorativo provoca desplazamiento lateral.
El texto con estilos en línea aparece en Resumen como una entrada de Texto con estilo. Edita su lista de clases de la misma forma.
Abre el Gestor de estilos, busca el estilo base o la variación, abre su menú de acciones y elige Editar clases.
Esto cambia todos los elementos que usan ese estilo. Por ejemplo, añadir tracking-tight al estilo base de los titulares ajusta todos los titulares del sitio.
Los cambios en los estilos base aparecen en el editor al momento y pasan al entorno en vivo con la siguiente publicación. Las clases de bloques y componentes se publican con la página o el componente.
Editar la lista de clases de una instancia de componente edita la raíz compartida del componente. El cambio llega a todas las instancias sincronizadas.
Usa nombres de utilidades normales al estilo Tailwind, separados por espacios:
p-6 rounded-2xl shadow-lg bg-[#f5efe6]
Patrones habituales:
Clase
mt-8
w-[42rem]
text-[15px]
bg-[#f5efe6]
rounded-3xl
hover:-translate-y-0.5
current:underline
max-md:px-4
[&>p]:mb-0
Efecto
Añade espacio arriba
Define un ancho personalizado
Define un tamaño de letra personalizado
Usa un color puntual
Redondea más las esquinas
Eleva el bloque ligeramente al pasar el cursor
Subraya un enlace cuando apunta a la página actual
Cambia el relleno en móvil horizontal y tamaños menores
Quita el margen inferior de los párrafos hijos directos
La mayoría de las clases utilitarias de Tailwind, sus variantes y los valores arbitrarios funcionan. Remake no es un proyecto Tailwind completo, así que una clase que dependa de una configuración personalizada o de un plugin de tu propio código puede que no exista.
Prefiere w-* max-w-full antes que un max-w-* suelto. El control de Tamaño lee y escribe w-*, así que un bloque que solo tenga un ancho máximo parecerá no tener ancho ahí.
El menú de dispositivos escribe max-lg:, max-md: y max-sm:. Corresponden a Tableta, Móvil horizontal y Móvil vertical.
En una lista de clases, usa los mismos prefijos para mantenerte coherente con el resto del editor:
p-4 max-lg:p-3 max-sm:p-2
Esto da 4 unidades de relleno en escritorio, 3 en tableta y tamaños menores, y 2 en los teléfonos más pequeños. Sigue el mismo orden de arriba abajo que el menú de dispositivos.
Los prefijos estándar sm:, md: y lg: también funcionan, pero significan «desde este ancho en adelante». Esa es la dirección mobile-first. Evita mezclar ambos estilos en la misma propiedad salvo que tengas un motivo.
Cuando dos utilidades simples definen la misma propiedad, gana la última de la lista. Por ejemplo:
p-4 p-8
queda como p-8.
Para sobrescribir un valor definido por la barra de herramientas, añade la clase nueva al final de la lista. Para sobrescribir un estilo base o una variación, añade la clase después del marcador del estilo y comprueba el resultado. Los marcadores no son utilidades normales, así que ahí el orden importa más.
Puede que la barra de herramientas no reconozca una clase personalizada. Un control de relleno puede verse vacío aunque p-[18px] esté aplicado. Vuelve a editar la lista de clases para cambiarlo.
Borra la clase de la lista y guarda.
Si la clase viene de un estilo base o una variación, quítala ahí en su lugar, o sobrescríbela en la lista del bloque. Borrar el marcador del estilo elimina todo el estilo, no solo una propiedad.
No hay un editor de CSS por bloque. Si necesitas una regla CSS de verdad en lugar de clases utilitarias, puedes añadir un bloque <style> mediante el código personalizado de la cabecera en Ajustes del proyecto. Eso se aplica a todo el sitio, así que úsalo con moderación.
hidden oculta el elemento en todas las pantallas.
fixed y absolute pueden romper un diseño, sobre todo en el móvil.
overflow-hidden puede recortar menús o sombras.
Una clase copiada de otro proyecto puede depender de un color o un plugin que aquí no existe.
Una clase que se ve bien en el editor puede comportarse distinto en el sitio publicado si depende de contenido que no está ahí.
Comprueba la página en tableta y móvil, publica y revisa la página en vivo antes de fiarte de una clase personalizada.
Selecciona una tarjeta.
Abre Resumen, busca la tarjeta y elige Editar clases manualmente.
Añade bg-[#f5efe6] p-8 rounded-3xl.
Guarda y comprueba la tarjeta en el móvil.
Si el relleno es demasiado grande ahí, añade max-sm:p-5 al final.
Publica.
Lee Gestor de estilos para los estilos compartidos, y Diseño adaptable para el orden de dispositivos.
Un creador de sitios web que funciona como un documento. CMS, formularios y alojamiento en la UE incluidos.
© 2026 Remake. Todos los derechos reservados.
