VueJs custom HTML tag with configurable classes and infinite variants. Friendly with utility-first frameworks like TailwindCSS.
Playground:
In this tab you can view, download and 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 example theme and add, edit or delete as many variants as you wish. Once you finished you can preview your theme in 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