Merge pull request #2399 from ZhenShuo2021/feat/enable-tailwind-colors

✨ Feat(tailwind): enable default colors

assets/css/compiled/main.css

@@ -1307,9 +1307,6 @@ body.zen-mode-enable {
   .inline-block {
     display: inline-block;
   }
-  .list-item {
-    display: list-item;
-  }
   .table {
     display: table;
   }
@@ -1509,12 +1506,6 @@ body.zen-mode-enable {
   .flex-none {
     flex: none;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
-  .shrink {
-    flex-shrink: 1;
-  }
   .shrink-0 {
     flex-shrink: 0;
   }
@@ -1527,9 +1518,6 @@ body.zen-mode-enable {
   .basis-auto {
     flex-basis: auto;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1870,6 +1858,9 @@ body.zen-mode-enable {
   .bg-\[\#6d6d6d\] {
     background-color: #6d6d6d;
   }
+  .bg-black {
+    background-color: #000;
+  }
   .bg-neutral {
     background-color: rgba(var(--color-neutral), 1);
   }
@@ -1915,6 +1906,9 @@ body.zen-mode-enable {
   .bg-transparent {
     background-color: transparent;
   }
+  .bg-white {
+    background-color: #fff;
+  }
   .bg-gradient-to-b {
     --tw-gradient-position: to bottom in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
@@ -2301,6 +2295,9 @@ body.zen-mode-enable {
   .text-transparent {
     color: transparent;
   }
+  .text-white {
+    color: #fff;
+  }
   .capitalize {
     text-transform: capitalize;
   }
@@ -2393,14 +2390,6 @@ body.zen-mode-enable {
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
@@ -2598,11 +2587,24 @@ body.zen-mode-enable {
       border-style: solid;
     }
   }
+  .group-data-\[twe-input-focused\]\:border-white {
+    &:is(:where(.group)[data-twe-input-focused] *) {
+      border-color: #fff;
+    }
+  }
   .group-data-\[twe-input-focused\]\:border-t-transparent {
     &:is(:where(.group)[data-twe-input-focused] *) {
       border-top-color: transparent;
     }
   }
+  .group-data-\[twe-input-focused\]\:shadow-white {
+    &:is(:where(.group)[data-twe-input-focused] *) {
+      --tw-shadow-color: #fff;
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-shadow-color: color-mix(in oklab, #fff var(--tw-shadow-alpha), transparent);
+      }
+    }
+  }
   .group-data-\[twe-input-state-active\]\:border-x-0 {
     &:is(:where(.group)[data-twe-input-state-active] *) {
       border-inline-style: var(--tw-border-style);
@@ -2758,13 +2760,6 @@ body.zen-mode-enable {
       }
     }
   }
-  .hover\:decoration-neutral-300 {
-    &:hover {
-      @media (hover: hover) {
-        text-decoration-color: rgba(var(--color-neutral-300), 1);
-      }
-    }
-  }
   .hover\:decoration-primary-400 {
     &:hover {
       @media (hover: hover) {
@@ -2772,13 +2767,6 @@ body.zen-mode-enable {
       }
     }
   }
-  .hover\:decoration-primary-500 {
-    &:hover {
-      @media (hover: hover) {
-        text-decoration-color: rgba(var(--color-primary-500), 1);
-      }
-    }
-  }
   .hover\:decoration-2 {
     &:hover {
       @media (hover: hover) {
@@ -3321,6 +3309,11 @@ body.zen-mode-enable {
       border-color: rgba(var(--color-primary-600), 1);
     }
   }
+  .dark\:border-white\/10 {
+    &:is(.dark *) {
+      border-color: color-mix(in oklab, #fff 10%, transparent);
+    }
+  }
   .dark\:prose-invert {
     &:is(.dark *) {
       --tw-prose-body: var(--tw-prose-invert-body);
@@ -3495,6 +3488,11 @@ body.zen-mode-enable {
       color: rgba(var(--color-primary-400), 1);
     }
   }
+  .dark\:text-white {
+    &:is(.dark *) {
+      color: #fff;
+    }
+  }
   .dark\:opacity-60 {
     &:is(.dark *) {
       opacity: 60%;
@@ -4233,11 +4231,6 @@ pre {
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -4340,6 +4333,11 @@ pre {
   initial-value: "";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @keyframes pulse {
   50% {
     opacity: 0.5;
@@ -4396,7 +4394,6 @@ pre {
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -4422,6 +4419,7 @@ pre {
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --tw-outline-style: solid;
     }
   }
 }

tailwind.config.js

@@ -16,6 +16,7 @@ module.exports = {
       "2xl": "1536px",
     },
     colors: {
+      ...require('tailwindcss/colors'),
       transparent: "transparent",
       neutral: {
         DEFAULT: "rgba(var(--color-neutral), <alpha-value>)",