VueJs custom HTML tag with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.
Playground:
In this tab you can view and download or copy the settings to make your theme look like the demo. If you want to modify these settings use the customize tab.
In this tab you can modify the TailwindCSS classes of the theme we create as example, you can also edit or delete as many variants as you wish. Once you finished you can preview your theme on the demo tab or grab the settings from the settings tab.
Fixed classes shared by all the variants
Classes used by default (when no variant is applied)
<t-tagtag-name="h1"variant="h3">
This is my title
<t-tagtag-name="span"variant="badge">new</t-tag></t-tag><t-tagtag-name="p"variant="body">This is the body of my content</t-tag>
This is my title
new
This is the body of my content
Props
Property
Type
Default value
Description
tagName
String
'div'
The HTML tag to use
text
String
undefined
Text inside the HTML tag
classes
Object
undefined
The default CSS classes
fixedClasses
Object
undefined
The default CSS Fixed classes shared for all variants
variants
Object
undefined
The different variants of classes the component have