app/assets/stylesheets/application.tailwind.css in shadcn-ui-0.0.2 vs app/assets/stylesheets/application.tailwind.css in shadcn-ui-0.0.3

@@ -1,184 +1,44 @@
+@import "shadcn.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --font-sans: "Inter var";
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
+  .container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    width: 100%;
   }
 
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
+  :root {
+    --pink: 301 98% 50% 0.88;
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
-  }
-
-  .code-sample {
-    @apply max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900;
-  }
-
-  .code-sample span {
-    @apply bg-zinc-950;
-  }
+article.documentation h1 {
+  @apply scroll-m-20 text-4xl font-bold tracking-tight;
 }
-input[type="range"] {
-  display: inline-block;
-  vertical-align: middle;
-  font-size: 1em;
-  font-family: Arial, sans-serif;
-}
 
-/* input[type="range"]:focus,
-input[type="number"]:focus {
-  box-shadow: 0 0 3px 1px #4b81dd;
-  outline: none;
-} */
-
-input[type="range"] {
-  -webkit-appearance: none;
-  margin-right: 15px;
-  width: 200px;
-  height: 7px;
-  background: #f4f4f5;
-  border-radius: 5px;
-  background-image: linear-gradient(#000, #000);
-  background-repeat: no-repeat;
+article.documentation p + h1 {
+  @apply mt-12;
 }
-
-/* Input Thumb */
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  background: #fff;
-  cursor: ew-resize;
-  box-shadow: 0 0 2px 0 #000;
-  transition: background 0.3s ease-in-out;
+article.documentation h2 {
+  @apply scroll-m-20 text-3xl font-bold tracking-tight my-8;
 }
 
-input[type="range"]::-moz-range-thumb {
-  -webkit-appearance: none;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  background: #fff;
-  cursor: ew-resize;
-  box-shadow: 0 0 2px 0 #000;
-  transition: background 0.3s ease-in-out;
+article.documentation h3 {
+  @apply scroll-m-20 text-2xl font-bold tracking-tight my-4;
 }
 
-input[type="range"]::-ms-thumb {
-  -webkit-appearance: none;
-  height: 20px;
-  width: 20px;
-  border-radius: 50%;
-  background: #fff;
-  cursor: ew-resize;
-  box-shadow: 0 0 2px 0 #000;
-  transition: background 0.3s ease-in-out;
+article.documentation h4 {
+  @apply scroll-m-20 text-xl font-bold tracking-tight my-2;
 }
 
-/* input[type="range"]::-webkit-slider-thumb:hover {
-  background: #a1a1aa;
-}
-
-input[type="range"]::-moz-range-thumb:hover {
-  background: #a1a1aa;
-}
-
-input[type="range"]::-ms-thumb:hover {
-  background: #a1a1aa;
-} */
-
-input[type="range"]::-moz-range-track {
-  -webkit-appearance: none;
-  box-shadow: none;
-  border: none;
-  background: transparent;
-}
-
-input[type="range"]::-ms-track {
-  -webkit-appearance: none;
-  box-shadow: none;
-  border: none;
-  background: transparent;
-}
-
-article.documentation h1 {
-  @apply scroll-m-20 text-4xl font-bold tracking-tight;
-}
 article.documentation subtitle {
   @apply text-lg text-muted-foreground;
 }
 article.documentation p {
   @apply leading-7 [&:not(:first-child)]:mt-6;
@@ -188,6 +48,18 @@
   content: "";
 }
 
 article.documentation :where(code):not(:where([class~="not-prose"] *)):after {
   content: "";
+}
+
+article.documentation p a {
+  @apply underline hover:text-pink;
+}
+
+article.documentation pre {
+  @apply max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900 text-white py-4 px-8 rounded-lg my-4;
+}
+
+article.documentation p > code {
+  @apply text-white bg-black p-1 rounded;
 }