| Clase Tailwind | CSS equivalente | Ejemplo |
|---|---|---|
| border | border-width: 1px; | |
| border-0 | border-width: 0px; | |
| border-2 | border-width: 2px; | |
| border-[6px] | border-width: 6px; | |
| border-dotted | border-style: dotted; | |
| border-dashed | border-style: dashed; | |
| border-t | border-top-width: 1px; | |
| border-x | border-left/right-width: 1px; | |
| border-b-4 | border-bottom-width: 4px; | |
| border-l-[10px] | border-left-width: 10px; | |
| border-blue-500 | border-color: #3b82f6; | |
| border-[#ff9900] | border-color: #ff9900; | |
| border-t-red-500 | border-top-color: #ef4444; | |
| border-opacity-50 | border-opacity: 0.5; | |
| border-blue-500/30 | border-color: rgba(59, 130, 246, 0.3); | |
| border-b-red-500/60 | border-bottom-color: rgba(239, 68, 68, 0.6); |
Estas clases aplican borde en direcciones específicas.
| Clase Tailwind | CSS equivalente | Ejemplo |
|---|---|---|
| border | border: 1px solid; | |
| border-x | border-left: 1px solid; border-right: 1px solid; |
|
| border-y | border-top: 1px solid; border-bottom: 1px solid; |
|
| border-t | border-top: 1px solid; | |
| border-r | border-right: 1px solid; | |
| border-b | border-bottom: 1px solid; | |
| border-l | border-left: 1px solid; | |
| border-s | border-inline-start: 1px solid; | |
| border-e | border-inline-end: 1px solid; |