Docs: Tailwind CSS 커스텀 설정 변경

Author: mungyun1

components/Layout/AuthLayout.tsx

@@ -5,7 +5,7 @@ import { ReactNode } from "react";
 const AuthLayout = ({ children }: { children: ReactNode }) => {
   const router = useRouter();
   return (
-    <div className="mx-auto bg-gray100 flex flex-col items-center justify-center h-screen">
+    <div className="mx-auto bg-gray100 flex flex-col items-center justify-center h-screen py-32">
       <div>
         <Image
           className="cursor-pointer"

styles/globals.css

@@ -10,21 +10,6 @@
   font-style: normal;
 }
 
-:root {
-  --background: #ffffff;
-  --white200: #f5f5f5;
-  --black100: #000;
-  --black200: #111322;
-  --black300: #373740;
-  --red100: #ff5b56;
-  --gray100: #f0f6ff;
-  --gray200: #e7effb;
-  --gray300: #ccd5e3;
-  --gray400: #9fa6b2;
-  --gray500: #3e3e43;
-  --purple100: #6d6afe;
-}
-
 body {
   color: var(--black100);
   background-color: var(--white100);

tailwind.config.ts

@@ -9,21 +9,21 @@ const config: Config = {
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        black100: "var(--black100)",
-        black200: "var(--black200)",
-        black300: "var(--black300)",
-        red100: "var(--red100)",
-        gray100: "var(--gray100)",
-        gray200: "var(--gray200)",
-        gray300: "var(--gray300)",
-        gray400: "var(--gray400)",
-        gray500: "var(--gray500)",
-        purple100: "var(--purple100)",
-        white200: "var(--white200)",
+        background: "#ffffff",
+        white200: "#f5f5f5",
+        black100: "#000",
+        black200: "#111322",
+        black300: "#373740",
+        red100: "#ff5b56",
+        gray100: "#f0f6ff",
+        gray200: "#e7effb",
+        gray300: "#ccd5e3",
+        gray400: "#9fa6b2",
+        gray500: "#3e3e43",
+        purple100: "#6d6afe",
       },
       screens: {
-        sm: "375px",
+        sm: "343px",
         md: "768px",
         lg: "1200px",
       },