| ```css | |
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| /* Animations */ | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .spinner-border { | |
| animation: spin 1s linear infinite; | |
| } | |
| /* Calendar Styles */ | |
| .calendar-day.active { | |
| @apply bg-indigo-100 border-indigo-500; | |
| } | |
| .calendar-day.has-recipe { | |
| @apply bg-green-50 border-green-200; | |
| } | |
| /* Recipe Cards */ | |
| .recipe-card { | |
| transition: all 0.2s ease-in-out; | |
| } | |
| .recipe-card:hover { | |
| transform: translateY(-2px); | |
| @apply shadow-lg; | |
| } | |
| /* Transition Effects */ | |
| .fade-enter-active, .fade-leave-active { | |
| transition: opacity 0.3s; | |
| } | |
| .fade-enter, .fade-leave-to { | |
| opacity: 0; | |
| } | |
| /* Form Styles */ | |
| .form-input { | |
| @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm; | |
| } | |
| /* Buttons */ | |
| .btn-primary { | |
| @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500; | |
| } | |
| /* Responsive Tables */ | |
| .responsive-table { | |
| @apply min-w-full divide-y divide-gray-200; | |
| } | |
| ``` | |
| 5. Main JavaScript file: |