Elements
Typetura uses a cocktail of animation styles to make everything work. You’ll need to apply these styles by either using the utility classes or by modifying the selector list.
Default element styling and utility classes
--tt: var(--on);: Add this to your style sheet for any element you wish to have Typetura styles..ttand.typetura: are default element selectors. After applying these classes to an element, you can start writing your Typetura CSS styles to that element.htmland.rtt: These default element selectors reference the root of the document as the container. Even when used inside of a container query, they will reference the root of the document.
html element
By default, html is already a Typetura element and container. We have found it is extremely useful to dynamically manage the root font styles on the <html> element. Visit our guide on root text styling for an example of how this is done.
Modifying selectors in the source
As of v4.1.1 you can assign typetura styles to any element using the property --tt: var(--on); in your CSS. This reduces the need to modify the source CSS file.
The Typetura element selectors are on lines 28-31 of the typetura.css source file. You can add and remove selectors there to fit your project.
The root Typetura element selector is on line 54 of the typetura.css source file.