imrpove tailwind base style

refine-nextjs/plugins/_base/src/styles/global.css

@@ -1,5 +1,6 @@
 body {
     margin: 0px;
+    background: white;
 }
 
 table {

refine-nextjs/plugins/tailwindcss/src/styles/global.css

@@ -0,0 +1,104 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* 
+* These styles were added to improve the appearance of the example pages.
+* It is safe to delete them, and they are not intended to be used by Refine components.
+*/
+@layer components {
+    input {
+        @apply border border-gray-300 rounded-sm;
+    }
+
+    input[type="submit"] {
+        @apply bg-[#EFEFEF];
+    }
+
+    button {
+        @apply border border-gray-300 px-2 rounded-sm bg-[#EFEFEF];
+    }
+
+    h1 {
+        @apply text-2xl font-bold my-6;
+    }
+
+    ul {
+        @apply list-disc my-4;
+    }
+
+    a {
+        @apply text-blue-700 underline;
+    }
+
+    label {
+        @apply text-sm font-medium;
+    }
+
+    body {
+        @apply m-0 bg-white;
+    }
+
+    table {
+        @apply border border-black border-collapse;
+    }
+
+    table th,
+    table td {
+        @apply m-0 p-2 border-b border-r border-black;
+    }
+
+    table tr:last-child td {
+        @apply border-b-0;
+    }
+
+    table th:last-child,
+    table td:last-child {
+        @apply border-r-0;
+    }
+
+    .layout {
+        @apply flex gap-4;
+    }
+
+    @media (max-width: 751px) {
+        .layout {
+            @apply block;
+        }
+    }
+
+    .layout .content {
+        @apply flex flex-col flex-grow;
+    }
+
+    .breadcrumb {
+        @apply flex gap-6 p-2 px-4 border-b border-gray-300;
+        list-style-type: "/ ";
+    }
+
+    .breadcrumb a {
+        @apply text-blue-700 no-underline;
+    }
+
+    .menu {
+        @apply flex-shrink-0 p-2 pr-4 border-r border-gray-300;
+    }
+
+    .menu a {
+        @apply text-black;
+    }
+
+    .menu .active {
+        @apply font-bold;
+    }
+
+    @media (max-width: 751px) {
+        .menu {
+            @apply border-r-0 border-b border-gray-300;
+        }
+    }
+
+    .menu ul {
+        @apply pl-4;
+    }
+}

refine-nextjs/plugins/tailwindcss/tailwind.config.js

@@ -10,7 +10,4 @@ module.exports = {
         extend: {},
     },
     plugins: [],
-    corePlugins: {
-        preflight: false,
-    },
 };

refine-remix/plugins/tailwindcss/app/global.css

@@ -2,91 +2,103 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-    margin: 0px;
-}
+/* 
+* These styles were added to improve the appearance of the example pages.
+* It is safe to delete them, and they are not intended to be used by Refine components.
+*/
+@layer components {
+    input {
+        @apply border border-gray-300 rounded-sm;
+    }
 
-table {
-    border-spacing: 0;
-    border: 1px solid black;
-}
+    input[type="submit"] {
+        @apply bg-[#EFEFEF];
+    }
 
-table th,
-td {
-    margin: 0;
-    padding: 0.5rem;
-    border-bottom: 1px solid black;
-    border-right: 1px solid black;
-}
+    button {
+        @apply border border-gray-300 px-2 rounded-sm bg-[#EFEFEF];
+    }
 
-table tr:last-child td {
-    border-bottom: 0;
-}
+    h1 {
+        @apply text-2xl font-bold my-6;
+    }
 
-table th,
-td {
-    margin: 0;
-    padding: 0.5rem;
-    border-bottom: 1px solid black;
-    border-right: 1px solid black;
-}
+    ul {
+        @apply list-disc my-4;
+    }
 
-table th:last-child,
-td:last-child {
-    border-right: 0;
-}
+    a {
+        @apply text-blue-700 underline;
+    }
 
-.layout {
-    display: flex;
-    gap: 16px;
-}
+    label {
+        @apply text-sm font-medium;
+    }
 
-@media screen and (max-width: 751px) {
-    .layout {
-        display: block;
+    body {
+        @apply m-0 bg-white;
     }
-}
 
-.layout .content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-}
+    table {
+        @apply border border-black border-collapse;
+    }
 
-.breadcrumb {
-    display: flex;
-    gap: 24px;
-    list-style-type: "/  ";
-    padding: 8px 16px;
-    border-bottom: 1px solid lightgray;
-}
+    table th,
+    table td {
+        @apply m-0 p-2 border-b border-r border-black;
+    }
 
-.breadcrumb a {
-    color: blue;
-    text-decoration: none;
-}
+    table tr:last-child td {
+        @apply border-b-0;
+    }
 
-.menu {
-    flex-shrink: 0;
-    padding: 8px 16px;
-    border-right: 1px solid lightgray;
-}
+    table th:last-child,
+    table td:last-child {
+        @apply border-r-0;
+    }
 
-.menu a {
-    color: black;
-}
+    .layout {
+        @apply flex gap-4;
+    }
 
-.menu .active {
-    font-weight: bold;
-}
+    @media (max-width: 751px) {
+        .layout {
+            @apply block;
+        }
+    }
+
+    .layout .content {
+        @apply flex flex-col flex-grow;
+    }
+
+    .breadcrumb {
+        @apply flex gap-6 p-2 px-4 border-b border-gray-300;
+        list-style-type: "/ ";
+    }
+
+    .breadcrumb a {
+        @apply text-blue-700 no-underline;
+    }
 
-@media screen and (max-width: 751px) {
     .menu {
-        border-right: none;
-        border-bottom: 1px solid lightgray;
+        @apply flex-shrink-0 p-2 pr-4 border-r border-gray-300;
+    }
+
+    .menu a {
+        @apply text-black;
     }
-}
 
-.menu ul {
-    padding-left: 16px;
+    .menu .active {
+        @apply font-bold;
+    }
+
+    @media (max-width: 751px) {
+        .menu {
+            @apply border-r-0 border-b border-gray-300;
+        }
+    }
+
+    .menu ul {
+        @apply pl-4;
+    }
 }

refine-remix/plugins/tailwindcss/tailwind.config.ts

@@ -6,7 +6,4 @@ export default {
         extend: {},
     },
     plugins: [],
-    corePlugins: {
-        preflight: false,
-    },
 } satisfies Config;

refine-vite/plugins/_base/src/App.css

@@ -1,5 +1,6 @@
 body {
     margin: 0px;
+    background: white;
 }
 
 table {