New updates and improvements to Versoly.

May 3, 2024

Responsive Typography Editor

We've added a new responsive typography editor inside the theme manager. It provides a powerful and intuitive way to create, manage, and preview typography classes for your website.

With this tool, you can easily add, edit, and delete typography class names, combining them with Tailwind utility classes for precise and maintable styling control.

Typography class names

  • Easily create new typography classes with custom font sizes, weights, and styles.
  • Modify existing typography classes to suit your design needs.
  • Remove unnecessary classes to keep your codebase clean and organized.

Tailwind utility classes

  • Combine typography classes with Tailwind's utility classes for more granular control over text styling.
  • Mix and match utility classes like text colors, letter spacing, and more.

Breakpoints, variant states and dynamic class names

  • Add, edit and remove breakpoints from a class name.
  • Variant states such as hover, focus and dark can be controlled visually as well.
  • Dynamic class names can be used for semantic class names that have multiple colors such as primary and secondary.

Preview the responsiveness on mobile, tablet, laptop and desktop

  • See how your typography classes will look across different screen sizes and devices.
  • Ensure your text remains legible and properly formatted on all viewports.
  • Preview with header and footer sections to see how the class name works with other elements.

Text input for class names

  • A second way to edit class names is using a text input instead of visually.
  • Quickly copy and paste class names directly from the input field.
  • Avoid mistakes when applying classes to your HTML elements.