Search and browse Tailwind CSS utility classes
| Class | CSS | Category | |
|---|---|---|---|
| p-0 | padding: 0px; | Spacing | |
| p-1 | padding: 0.25rem; /* 4px */ | Spacing | |
| p-2 | padding: 0.5rem; /* 8px */ | Spacing | |
| p-3 | padding: 0.75rem; /* 12px */ | Spacing | |
| p-4 | padding: 1rem; /* 16px */ | Spacing | |
| p-5 | padding: 1.25rem; /* 20px */ | Spacing | |
| p-6 | padding: 1.5rem; /* 24px */ | Spacing | |
| p-8 | padding: 2rem; /* 32px */ | Spacing | |
| px-4 | padding-left: 1rem; padding-right: 1rem; | Spacing | |
| py-4 | padding-top: 1rem; padding-bottom: 1rem; | Spacing | |
| m-0 | margin: 0px; | Spacing | |
| m-1 | margin: 0.25rem; /* 4px */ | Spacing | |
| m-2 | margin: 0.5rem; /* 8px */ | Spacing | |
| m-4 | margin: 1rem; /* 16px */ | Spacing | |
| m-auto | margin: auto; | Spacing | |
| mx-auto | margin-left: auto; margin-right: auto; | Spacing | |
| my-4 | margin-top: 1rem; margin-bottom: 1rem; | Spacing | |
| mt-4 | margin-top: 1rem; | Spacing | |
| mb-4 | margin-bottom: 1rem; | Spacing | |
| gap-1 | gap: 0.25rem; /* 4px */ | Spacing | |
| gap-2 | gap: 0.5rem; /* 8px */ | Spacing | |
| gap-4 | gap: 1rem; /* 16px */ | Spacing | |
| gap-6 | gap: 1.5rem; /* 24px */ | Spacing | |
| space-x-2 | margin-left: 0.5rem; (on children) | Spacing | |
| space-y-2 | margin-top: 0.5rem; (on children) | Spacing | |
| text-xs | font-size: 0.75rem; line-height: 1rem; | Typography | |
| text-sm | font-size: 0.875rem; line-height: 1.25rem; | Typography | |
| text-base | font-size: 1rem; line-height: 1.5rem; | Typography | |
| text-lg | font-size: 1.125rem; line-height: 1.75rem; | Typography | |
| text-xl | font-size: 1.25rem; line-height: 1.75rem; | Typography | |
| text-2xl | font-size: 1.5rem; line-height: 2rem; | Typography | |
| text-3xl | font-size: 1.875rem; line-height: 2.25rem; | Typography | |
| text-4xl | font-size: 2.25rem; line-height: 2.5rem; | Typography | |
| font-thin | font-weight: 100; | Typography | |
| font-light | font-weight: 300; | Typography | |
| font-normal | font-weight: 400; | Typography | |
| font-medium | font-weight: 500; | Typography | |
| font-semibold | font-weight: 600; | Typography | |
| font-bold | font-weight: 700; | Typography | |
| italic | font-style: italic; | Typography | |
| underline | text-decoration-line: underline; | Typography | |
| line-through | text-decoration-line: line-through; | Typography | |
| uppercase | text-transform: uppercase; | Typography | |
| lowercase | text-transform: lowercase; | Typography | |
| capitalize | text-transform: capitalize; | Typography | |
| text-left | text-align: left; | Typography | |
| text-center | text-align: center; | Typography | |
| text-right | text-align: right; | Typography | |
| leading-none | line-height: 1; | Typography | |
| leading-tight | line-height: 1.25; | Typography | |
| leading-normal | line-height: 1.5; | Typography | |
| tracking-tight | letter-spacing: -0.025em; | Typography | |
| tracking-wide | letter-spacing: 0.025em; | Typography | |
| truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap; | Typography | |
| text-black | color: #000000; | Colors | |
| text-white | color: #ffffff; | Colors | |
| text-gray-500 | color: #6b7280; | Colors | |
| text-red-500 | color: #ef4444; | Colors | |
| text-blue-500 | color: #3b82f6; | Colors | |
| text-green-500 | color: #22c55e; | Colors | |
| text-yellow-500 | color: #eab308; | Colors | |
| bg-black | background-color: #000000; | Colors | |
| bg-white | background-color: #ffffff; | Colors | |
| bg-gray-100 | background-color: #f3f4f6; | Colors | |
| bg-gray-200 | background-color: #e5e7eb; | Colors | |
| bg-gray-500 | background-color: #6b7280; | Colors | |
| bg-red-500 | background-color: #ef4444; | Colors | |
| bg-blue-500 | background-color: #3b82f6; | Colors | |
| bg-green-500 | background-color: #22c55e; | Colors | |
| opacity-0 | opacity: 0; | Colors | |
| opacity-50 | opacity: 0.5; | Colors | |
| opacity-100 | opacity: 1; | Colors | |
| flex | display: flex; | Flexbox | |
| inline-flex | display: inline-flex; | Flexbox | |
| flex-row | flex-direction: row; | Flexbox | |
| flex-col | flex-direction: column; | Flexbox | |
| flex-wrap | flex-wrap: wrap; | Flexbox | |
| flex-nowrap | flex-wrap: nowrap; | Flexbox | |
| flex-1 | flex: 1 1 0%; | Flexbox | |
| flex-none | flex: none; | Flexbox | |
| items-start | align-items: flex-start; | Flexbox | |
| items-center | align-items: center; | Flexbox | |
| items-end | align-items: flex-end; | Flexbox | |
| items-stretch | align-items: stretch; | Flexbox | |
| justify-start | justify-content: flex-start; | Flexbox | |
| justify-center | justify-content: center; | Flexbox | |
| justify-end | justify-content: flex-end; | Flexbox | |
| justify-between | justify-content: space-between; | Flexbox | |
| justify-around | justify-content: space-around; | Flexbox | |
| self-start | align-self: flex-start; | Flexbox | |
| self-center | align-self: center; | Flexbox | |
| self-end | align-self: flex-end; | Flexbox | |
| grow | flex-grow: 1; | Flexbox | |
| shrink-0 | flex-shrink: 0; | Flexbox | |
| grid | display: grid; | Grid | |
| grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); | Grid | |
| grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); | Grid | |
| grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); | Grid | |
| grid-cols-4 | grid-template-columns: repeat(4, minmax(0, 1fr)); | Grid | |
| grid-cols-12 | grid-template-columns: repeat(12, minmax(0, 1fr)); | Grid |