Build your own theme

Choose the components

Select the component you need for your application

Personalize them

Create yout own theme for every single element

Save and install

Grab the code to use with the VueTailwnd plugin

Share it (WIP)

Optionally share your theme with the community (Coming soon...)

Choose the component you need

Select the components that you want to personalize

HTML Inputs

UI Components

Input Group

Your password

Your password doesnt match!

Custom Tag

Custom tag

Rich Select

Date picker

SunMonTueWedThuFriSat

Toggle

Alert

So you selected VueJs & Tailwind Combo, Good decision!

Card

User profile

Im a full-stack software from Mexico City that likes Vue & TailwindCSS.

Dialog

Delete user?

This action will delete the user permanently and cannot be undone.

Modal

User profile

Im a full-stack software from Mexico City that likes Vue & TailwindCSS.

Table

Name	Email	Age	Sales
Alfonso Bribiesca	alfonso@vexilo.com	31	$9,999.00
Saida Redondo	saida@gmail.com	27	$124.00

Pagination

Dropdown

Personalize your component CSS classes

Browse among the components you chose and assign them a list of default classes as well as all the variants you need.

TInput

Fixed classes

Fixed classes shared by all the variants

Classes

Base classes

Classes used by default (when no variant is applied)

Classes

block w-full px-3 py-2 transition duration-100 ease-in-out border rounded shadow-sm focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

Preview

Variants:

Variant name

Variant classes

Classes used when the danger variant is applied

Classes

Preview

Remove variant

Variant name

Variant classes

Classes used when the success variant is applied

Classes

Preview

Remove variant

TTextarea

TSelect

TRadio

TCheckbox

TButton

TInputGroup

TRichSelect

Fixed classes

Fixed classes shared by all the variants

wrapper classes

button wrapper classes

select button classes

select button label classes

select button placeholder classes

select button icon classes

select button clear button classes

select button clear icon classes

dropdown classes

dropdown feedback classes

loading more results classes

options list classes

search wrapper classes

search box classes

optgroup classes

option classes

highlighted option classes

selected option classes

selected highlighted option classes

option content classes

option label classes

selected icon classes

enter class classes

enter active class classes

enter to class classes

leave class classes

leave active class classes

leave to class classes

Base classes

Classes used by default (when no variant is applied)

wrapper classes

relative

button wrapper classes

inline-block relative w-full

select button classes

w-full flex text-left justify-between items-center px-3 py-2 text-black transition duration-100 ease-in-out border rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

select button label classes

block truncate

select button placeholder classes

block truncate

select button icon classes

fill-current flex-shrink-0 ml-1 h-4 w-4

select button clear button classes

rounded flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6 transition duration-100 ease-in-out

select button clear icon classes

fill-current h-3 w-3

dropdown classes

absolute w-full z-10 -mt-1 absolute border-b border-l border-r rounded-b shadow-sm z-10

dropdown feedback classes

loading more results classes

options list classes

overflow-auto

search wrapper classes

inline-block w-full

search box classes

inline-block w-full

optgroup classes

option classes

cursor-pointer

highlighted option classes

cursor-pointer

selected option classes

cursor-pointer

selected highlighted option classes

cursor-pointer

option content classes

option label classes

truncate block

selected icon classes

fill-current h-4 w-4

enter class classes

enter active class classes

enter to class classes

leave class classes

leave active class classes

leave to class classes

Preview

Variants:

Variant name

Variant classes

Classes used when the danger variant is applied

wrapper classes

relative

button wrapper classes

inline-block relative w-full

select button classes

select button label classes

block truncate

select button placeholder classes

block truncate

select button icon classes

fill-current flex-shrink-0 ml-1 h-4 w-4

select button clear button classes

rounded flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6 transition duration-100 ease-in-out

select button clear icon classes

fill-current h-3 w-3

dropdown classes

absolute w-full z-10 -mt-1 absolute border-b border-l border-r rounded-b shadow-sm z-10

dropdown feedback classes

loading more results classes

options list classes

overflow-auto

search wrapper classes

inline-block w-full

search box classes

inline-block w-full

optgroup classes

option classes

cursor-pointer

highlighted option classes

cursor-pointer

selected option classes

cursor-pointer

selected highlighted option classes

cursor-pointer

option content classes

option label classes

truncate block

selected icon classes

fill-current h-4 w-4

enter class classes

enter active class classes

enter to class classes

leave class classes

leave active class classes

leave to class classes

Preview

Remove variant

Variant name

Variant classes

Classes used when the success variant is applied

wrapper classes

relative

button wrapper classes

inline-block relative w-full

select button classes

select button label classes

block truncate

select button placeholder classes

block truncate

select button icon classes

fill-current flex-shrink-0 ml-1 h-4 w-4

select button clear button classes

rounded flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6 transition duration-100 ease-in-out

select button clear icon classes

fill-current h-3 w-3

dropdown classes

absolute w-full z-10 -mt-1 absolute border-b border-l border-r rounded-b shadow-sm z-10

dropdown feedback classes

loading more results classes

options list classes

overflow-auto

search wrapper classes

inline-block w-full

search box classes

inline-block w-full

optgroup classes

option classes

cursor-pointer

highlighted option classes

cursor-pointer

selected option classes

cursor-pointer

selected highlighted option classes

cursor-pointer

option content classes

option label classes

truncate block

selected icon classes

fill-current h-4 w-4

enter class classes

enter active class classes

enter to class classes

leave class classes

leave active class classes

leave to class classes

Preview

Remove variant

TDatepicker

Fixed classes

Fixed classes shared by all the variants

wrapper classes

dropdown wrapper classes

dropdown classes

enter class classes

enter active class classes

enter to class classes

leave class classes

leave active class classes

leave to class classes

inline wrapper classes

input wrapper classes

input classes

view group classes

view classes

navigator classes

navigator view button classes

navigator view button icon classes

navigator view button back icon classes

navigator view button month classes

navigator view button year classes

navigator view button year range classes

navigator label classes

navigator label month classes

navigator label year classes

navigator prev button classes

navigator next button classes

navigator prev button icon classes

navigator next button icon classes

calendar wrapper classes

calendar header wrapper classes

calendar header week day classes

calendar days wrapper classes

calendar days day wrapper classes

other month day classes

empty day classes

in range first day classes

in range last day classes

in range day classes

selected day classes

active day classes

highlighted day classes

day classes

today classes

month wrapper classes

selected month classes

active month classes

month classes

year wrapper classes

year classes

selected year classes

active year classes

clear button classes

clear button icon classes

Base classes

Classes used by default (when no variant is applied)

wrapper classes

dropdown wrapper classes

dropdown classes

enter class classes

enter active class classes

enter to class classes

leave class classes

leave active class classes

leave to class classes

inline wrapper classes

input wrapper classes

relative

input classes

block w-full px-3 py-2 transition duration-100 ease-in-out border rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

view group classes

inline-flex flex-wrap

view classes

w-64

navigator classes

flex

navigator view button classes

flex items-center

navigator view button icon classes

flex-shrink-0 h-5 w-5

navigator view button back icon classes

flex-shrink-0 h-5 w-5

navigator view button month classes

navigator view button year classes

navigator view button year range classes

navigator label classes

flex items-center py-1

navigator label month classes

navigator label year classes

navigator prev button classes

navigator next button classes

navigator prev button icon classes

h-6 w-6 inline-flex

navigator next button icon classes

h-6 w-6 inline-flex

calendar wrapper classes

calendar header wrapper classes

grid grid-cols-7

calendar header week day classes

calendar days wrapper classes

grid grid-cols-7

calendar days day wrapper classes

other month day classes

empty day classes

in range first day classes

in range last day classes

in range day classes

selected day classes

active day classes

highlighted day classes

day classes

today classes

month wrapper classes

grid grid-cols-4

selected month classes

active month classes

month classes

year wrapper classes

grid grid-cols-4

year classes

selected year classes

active year classes

clear button classes

flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6

clear button icon classes

fill-current h-3 w-3

Preview

Variants:

Variant name

Variant classes

Classes used when the danger variant is applied

wrapper classes

dropdown wrapper classes

dropdown classes

enter class classes

enter active class classes

enter to class classes

leave class classes

leave active class classes

leave to class classes

inline wrapper classes

input wrapper classes

relative

input classes

view group classes

inline-flex flex-wrap

view classes

w-64

navigator classes

flex

navigator view button classes

flex items-center

navigator view button icon classes

flex-shrink-0 h-5 w-5

navigator view button back icon classes

flex-shrink-0 h-5 w-5

navigator view button month classes

navigator view button year classes

navigator view button year range classes

navigator label classes

flex items-center py-1

navigator label month classes

navigator label year classes

navigator prev button classes

navigator next button classes

navigator prev button icon classes

h-6 w-6 inline-flex

navigator next button icon classes

h-6 w-6 inline-flex

calendar wrapper classes

calendar header wrapper classes

grid grid-cols-7

calendar header week day classes

calendar days wrapper classes

grid grid-cols-7

calendar days day wrapper classes

other month day classes

empty day classes

in range first day classes

in range last day classes

in range day classes

selected day classes

active day classes

highlighted day classes

day classes

today classes

month wrapper classes

grid grid-cols-4

selected month classes

active month classes

month classes

year wrapper classes

grid grid-cols-4

year classes

selected year classes

active year classes

clear button classes

flex flex-shrink-0 items-center justify-center absolute right-0 top-0 m-2 h-6 w-6

clear button icon classes

fill-current h-3 w-3

Preview

Remove variant

TTag

TToggle

Fixed classes

Fixed classes shared by all the variants

wrapper classes

wrapper checked classes

button classes

button checked classes

checked placeholder classes

unchecked placeholder classes

Base classes

Classes used by default (when no variant is applied)

wrapper classes

relative inline-flex flex-shrink-0 cursor-pointer transition-colors ease-in-out duration-200

wrapper checked classes

relative inline-flex flex-shrink-0 cursor-pointer transition-colors ease-in-out duration-200 border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50

button classes

inline-block absolute transform translate-x-0 transition ease-in-out duration-200

button checked classes

inline-block absolute transform translate-x-full transition ease-in-out duration-200

checked placeholder classes

inline-block

unchecked placeholder classes

inline-block

Preview

Variants:

Variant name

Variant classes

Classes used when the danger variant is applied

wrapper classes

relative inline-flex flex-shrink-0 cursor-pointer transition-colors ease-in-out duration-200

wrapper checked classes

relative inline-flex flex-shrink-0 cursor-pointer transition-colors ease-in-out duration-200 border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50

button classes

inline-block absolute transform translate-x-0 transition ease-in-out duration-200

button checked classes

inline-block absolute transform translate-x-full transition ease-in-out duration-200

checked placeholder classes

inline-block

unchecked placeholder classes

inline-block

Preview

Remove variant

Variant name

Variant classes

Classes used when the success variant is applied

wrapper classes

relative inline-flex flex-shrink-0 cursor-pointer transition-colors ease-in-out duration-200

wrapper checked classes

relative inline-flex flex-shrink-0 cursor-pointer transition-colors ease-in-out duration-200 border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50

button classes

inline-block absolute transform translate-x-0 transition ease-in-out duration-200

button checked classes

inline-block absolute transform translate-x-full transition ease-in-out duration-200

checked placeholder classes

inline-block

unchecked placeholder classes

inline-block

Preview

Remove variant

Variant name

Variant classes

Classes used when the box variant is applied

wrapper classes

relative inline-flex flex-shrink-0 cursor-pointer transition-colors ease-in-out duration-200

wrapper checked classes

relative inline-flex flex-shrink-0 cursor-pointer transition-colors ease-in-out duration-200 border-2 border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50

button classes

inline-block absolute transform translate-x-0 transition ease-in-out duration-200

button checked classes

inline-block absolute transform translate-x-full transition ease-in-out duration-200

checked placeholder classes

inline-block

unchecked placeholder classes

inline-block

Preview

Remove variant

TAlert

TCard

TModal

Fixed classes

Fixed classes shared by all the variants

overlay classes

wrapper classes

modal classes

body classes

header classes

footer classes

close classes

close icon classes

Base classes

Classes used by default (when no variant is applied)

overlay classes

z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50

wrapper classes

relative mx-auto z-50 max-w-lg px-3 py-12

modal classes

overflow-visible relative rounded

body classes

p-3

header classes

border-b p-3 rounded-t

footer classes

p-3 rounded-b

close classes

flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50

close icon classes

Preview

Title of the modal

So you selected VueJs & Tailwind Combo, Good decision!

This it content inside the footer slot

Variants:

Variant name

Variant classes

Classes used when the danger variant is applied

overlay classes

z-40 overflow-auto scrolling-touch left-0 top-0 bottom-0 right-0 w-full h-full fixed bg-opacity-50

wrapper classes

relative mx-auto z-50 max-w-lg px-3 py-12

modal classes

overflow-visible relative rounded

body classes

p-3

header classes

border-b p-3 rounded-t

footer classes

p-3 rounded-b

close classes

flex items-center justify-center rounded-full absolute right-0 top-0 -m-3 h-8 w-8 transition duration-100 ease-in-out focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50

close icon classes

Preview

Title of the modal

So you selected VueJs & Tailwind Combo, Good decision!

This it content inside the footer slot

Remove variant

TDialog

TTable

TPagination

TDropdown

Fixed classes

Fixed classes shared by all the variants

button classes

wrapper classes

dropdown wrapper classes

dropdown classes

enter class classes

enter active class classes

enter to class classes

leave class classes

leave active class classes

leave to class classes

Base classes

Classes used by default (when no variant is applied)

button classes

flex items-center text-white block px-4 py-2 transition duration-100 ease-in-out border border-transparent rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed

wrapper classes

inline-flex flex-col

dropdown wrapper classes

relative z-10

dropdown classes

origin-top-left absolute left-0 w-56 rounded shadow mt-1

enter class classes

opacity-0 scale-95

enter active class classes

transition transform ease-out duration-100

enter to class classes

opacity-100 scale-100

leave class classes

opacity-100 scale-100

leave active class classes

transition transform ease-in duration-75

leave to class classes

opacity-0 scale-95

Preview

Variants:

Variant name

Variant classes

Classes used when the danger variant is applied

button classes

wrapper classes

inline-flex flex-col

dropdown wrapper classes

relative z-10

dropdown classes

origin-top-left absolute left-0 w-56 rounded shadow mt-1

enter class classes

opacity-0 scale-95

enter active class classes

transition transform ease-out duration-100

enter to class classes

opacity-100 scale-100

leave class classes

opacity-100 scale-100

leave active class classes

transition transform ease-in duration-75

leave to class classes

opacity-0 scale-95

Preview

Remove variant