tailwind.css

@import "tailwindcss";

@variant dark (&:where(.dark, .dark *));

.navitem {
    @apply flex flex-col items-center p-3 md:p-4 rounded-xl hover:bg-gray-700 hover:text-blue-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.navitem-icon {
    @apply text-2xl md:text-3xl transition-transform group-hover:scale-110;
}

.input-field-common {
    @apply shadow appearance-none rounded w-full py-2 px-3 text-gray-700 leading-tight focus:ring disabled:text-gray-400 disabled:cursor-not-allowed;
}

.btn-primary {
    @apply bg-blue-700 hover:bg-blue-800 px-5 py-3 text-white rounded-lg disabled:bg-gray-400 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-blue-700;
}