¡Bienvenido a Next.js!

Este es un componente de ejemplo que demuestra el uso de CSS Modules con Tailwind y la estructura de carpetas definida en nuestro proyecto.

Tailwind Theme Variables

Colors

primary
var(--color-blue-500)
secondary
var(--color-gray-500)
success
var(--color-green-500)
warning
var(--color-yellow-500)
error
var(--color-red-500)

Font Size

text-xs
var(--text-xs)
Aa
text-sm
var(--text-sm)
Aa
text-base
var(--text-base)
Aa
text-lg
var(--text-lg)
Aa
text-xl
var(--text-xl)
Aa
text-2xl
var(--text-2xl)
Aa

Font Weight

font-thin
var(--font-weight-thin)
Texto
font-normal
var(--font-weight-normal)
Texto
font-medium
var(--font-weight-medium)
Texto
font-bold
var(--font-weight-bold)
Texto
font-black
var(--font-weight-black)
Texto

Spacing

spacing-0
0
spacing-1
var(--spacing)
spacing-2
calc(var(--spacing) * 2)
spacing-4
calc(var(--spacing) * 4)
spacing-8
calc(var(--spacing) * 8)

Border Radius

radius-none
0
radius-sm
var(--radius-sm)
radius-md
var(--radius-md)
radius-lg
var(--radius-lg)
radius-full
9999px

Shadows

shadow-sm
var(--shadow-sm)
shadow-md
var(--shadow-md)
shadow-lg
var(--shadow-lg)
shadow-xl
var(--shadow-xl)
shadow-2xl
var(--shadow-2xl)