```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: