...

public/resources/scss/app.scss

@@ -0,0 +1,126 @@
+// Import Tailwind CSS
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// Custom styles
+body {
+    @apply antialiased text-gray-900 bg-gray-50;
+}
+
+// Card styles
+.card {
+    @apply bg-white rounded-lg shadow overflow-hidden;
+    
+    &-header {
+        @apply px-6 py-4 border-b border-gray-200;
+        
+        h2 {
+            @apply text-lg font-medium text-gray-900;
+        }
+    }
+    
+    &-body {
+        @apply p-6;
+    }
+}
+
+// Button styles
+.btn {
+    @apply px-4 py-2 rounded-md text-sm font-medium transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2;
+    
+    &-primary {
+        @apply bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
+    }
+    
+    &-secondary {
+        @apply bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500;
+    }
+    
+    &-danger {
+        @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
+    }
+}
+
+// Form styles
+.form-group {
+    @apply mb-4;
+    
+    label {
+        @apply block text-sm font-medium text-gray-700 mb-1;
+    }
+    
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    input[type="number"],
+    select,
+    textarea {
+        @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm;
+    }
+    
+    .form-error {
+        @apply mt-1 text-sm text-red-600;
+    }
+}
+
+// Alert styles
+.alert {
+    @apply p-4 rounded-md;
+    
+    &-success {
+        @apply bg-green-50 text-green-800;
+    }
+    
+    &-error {
+        @apply bg-red-50 text-red-800;
+    }
+    
+    &-info {
+        @apply bg-blue-50 text-blue-800;
+    }
+    
+    &-warning {
+        @apply bg-yellow-50 text-yellow-800;
+    }
+}
+
+// Animation utilities
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+// Responsive table
+.table-responsive {
+    @apply overflow-x-auto;
+    
+    table {
+        @apply min-w-full divide-y divide-gray-200;
+        
+        thead {
+            @apply bg-gray-50;
+            
+            th {
+                @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
+            }
+        }
+        
+        tbody {
+            @apply bg-white divide-y divide-gray-200;
+            
+            tr {
+                @apply hover:bg-gray-50;
+                
+                td {
+                    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
+                }
+            }
+        }
+    }
+}