diff --git a/sample/tailwindSample.css b/sample/tailwindSample.css new file mode 100644 index 00000000..9138f062 --- /dev/null +++ b/sample/tailwindSample.css @@ -0,0 +1,62 @@ +/* Container principal - estilo Tailwind-like */ +.react-calendar { + @apply w-full max-w-md bg-white font-sans rounded-lg shadow-sm overflow-hidden items-center justify-center; + line-height: 1.125em; +} + +/* Header do calendário */ +.react-calendar__navigation { + @apply flex justify-between items-center mb-4 bg-gray-100 p-2 rounded-t-lg; +} + +.react-calendar__navigation button { + @apply bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-full p-2 transition-colors; + min-width: 44px; +} + +/* Dias da semana */ +.react-calendar__month-view__weekdays { + @apply text-xs text-gray-500 uppercase font-medium text-center mb-2; +} + +/* Dias do calendário */ +.react-calendar__tile { + @apply w-10 h-10 m-1 p-0 rounded-full flex items-center justify-center + text-gray-700 hover:bg-gray-100 transition-colors; +} + +/* Dia atual */ +.react-calendar__tile--now { + @apply bg-blue-100 text-blue-600 font-medium; +} + +/* Dia selecionado */ +.react-calendar__tile--active { + @apply bg-blue-500 text-white hover:bg-blue-600; +} + +/* Dias de fim de semana */ +.react-calendar__month-view__days__day--weekend { + @apply text-gray-400; +} + +/* Dias do mês vizinho */ +.react-calendar__month-view__days__day--neighboringMonth { + @apply text-gray-300; +} + +/* Container dos dias */ +.react-calendar__month-view__days { + @apply grid grid-cols-7 gap-1 p-2; +} + +/* Ajustes para hover e estados */ +.react-calendar__tile:enabled:hover, +.react-calendar__tile:enabled:focus { + @apply bg-gray-100; +} + +.react-calendar__tile--active:enabled:hover, +.react-calendar__tile--active:enabled:focus { + @apply bg-blue-600; +} \ No newline at end of file