Working on tailwind and styles.

diff --git a/src/App.js b/src/App.js
index 6e44ca297a9715c0e9715825964d9b5eb77429e0..26a676796cf4913c0878aa2dff491da0ec291db0 100755 (executable)
--- a/src/App.js
+++ b/src/App.js
@@ -21,7 +21,7 @@ const App = () => {
         <AuthProvider>
           <div className="flex flex-col min-h-screen">
             <AppHeader />
-            <main className="flex-grow pt-20" style={{ paddingTop: '64px' }}> {/* Padding for sticky header */}
+            <main className="flex-grow pt-40" style={{ paddingTop: '64px' }}> {/* Padding for sticky header */}
               <AppRoutes />
             </main>
           </div>

diff --git a/src/styles/App.css b/src/styles/App.css
index 41a15fd72adc186dde93d747a9e46146083ac024..98c33447bcdee4e7d917a184fadc71c73bbd3011 100755 (executable)
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -1,7 +1,8 @@
-@import "../index.css";
-
-.container {
-    @apply max-w-7xl mx-auto p-4;
+/* src/styles/App.css */
+@layer components {
+    .container {
+        @apply max-w-7xl mx-auto p-4;
+    }
 }
 
 .table-header {

diff --git a/tailwind.config.js b/tailwind.config.js
index 05e53aaee27d1547ac47bc0165edc2d23436f32f..5ec84ce74847a6bdd5d19f80bb2725395033775b 100755 (executable)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,18 +11,12 @@ module.exports = {
   presets: [],
   darkMode: 'class',
   theme: {
-    accentColor: ({ theme }) => ({
-      ...theme('colors'),
-      auto: 'auto',
-    }),
-    animation: {
-      none: 'none',
-      spin: 'spin 1s linear infinite',
-      ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
-      pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-      bounce: 'bounce 1s infinite',
+    extend: {
+      maxWidth: {
+        '7xl': '128rem', // Match spacing.7xl
+      },
     },
-    // ... (your provided theme configuration)
+    // Your existing theme configuration
     spacing: {
       xs: '32rem',
       sm: '48rem',
@@ -96,7 +90,7 @@ module.exports = {
       512: '51.2rem',
       640: '64rem',
     },
-    // ... (rest of your provided configuration)
+    // ... (rest of your provided theme configuration)
     plugins: [
       require('@tailwindcss/typography')({ modifiers: ['sm', 'lg'] }),
       require('@tailwindcss/aspect-ratio'),