general

General

Cls

Prop

.bg-blue-500

.cursor-pointer

cursor: pointer;

Border

Cls

Prop

.border-[solid|none]

border-style: [solid|none]

.border-4

.border-gray-600

.rounded-sm

border-radius: .125rem;

.rounded

border-radius: 0.25rem;

.rounded-full

border-radius: 9999px;

More

Cls

Prop

shadow

box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);

Active Styles

Just prepend any class with hover: or focus:

Container

Container sets the max-width to the different sizing breakpoints

<div class="container mx-auto">
  <!-- ... -->
</div>

Last updated