Merge pull request #15 from GU-99/feature/tailwind-setting

Config: #13 Tailwind CSS 속성 커스텀하기

src/globals.css

@@ -0,0 +1,73 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* contents size */
+    --height-header: 4rem;
+    --height-contents: calc(100vh - var(--height-header));
+
+    /* font-family */
+    --font-family-roboto: 'Roboto', sans-serif;
+
+    /* font-size */
+    --font-size-regular: 1rem;
+    --font-size-large: 1.125rem;
+    --font-size-404: 3rem;
+
+    /* font-weight */
+    --font-weight-regular: 400;
+    --font-weight-bold: 700;
+    --font-weight-404: 900;
+
+    /* letter spacing */
+    --narrow-spacing-large: -0.05rem;
+    --narrow-spacing-regular: -0.03rem;
+
+    /* border radius */
+    --border-radius-sl: 0.625rem;
+
+    /* color */
+    --color-main: #237700;
+    --color-sub: #e1f4d9;
+    --color-close: #be0000;
+    --color-contents-box: #fdfdfd;
+    --color-disable: #c2c2c2;
+    --color-selected: #c2c2c2;
+    --color-scroll: #f5f5f5;
+    --color-button: #efefef;
+    --color-kakao: #f6e04b;
+
+    /* todo color */
+    --color-todo-red: #c83c00;
+    --color-todo-yellow: #dab700;
+    --color-todo-green: #237700;
+    --color-todo-blue: #00c2ff;
+    --color-todo-orange: #ff7a00;
+    --color-todo-purple: #db00ff;
+    --color-todo-pink: #ff0099;
+    --color-todo-yellow-green: #8fff00;
+    --color-todo-gray: #d9d9d9;
+
+    /* text color */
+    --text-color-default: #2c2c2c;
+    --text-color-bold: #5e5e5e;
+    --text-color-error: #be0000;
+    --text-color-blue: #0909e7;
+
+    /* border color */
+    --border-list: #efefef;
+    --border-input: #b1b1b1;
+    --border-scroll: #dfdfdf;
+  }
+
+  body {
+    font-family: var(--font-family-roboto);
+    font-size: var(--font-size-regular);
+    font-weight: var(--font-weight-regular);
+    font-style: normal;
+  }
+}

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import MainRouter from './routes/MainRouter.tsx';
+import '@/globals.css';
+import MainRouter from '@routes/MainRouter.tsx';
 
 async function enableMocking() {
   if (!import.meta.env.DEV) return;

tailwind.config.js

@@ -1,8 +1,72 @@
 /** @type {import('tailwindcss').Config} */
+
+export const customSpacing = {};
+for (let i = 0; i <= 400; i++) {
+  customSpacing[i] = `${(i * 0.1).toFixed(1)}rem`;
+}
+
 export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    letterSpacing: {
+      tighter: 'var(--narrow-spacing-large)',
+      tight: 'var(--narrow-spacing-regular)',
+    },
+    extend: {
+      spacing: customSpacing,
+      height: {
+        header: 'var(--height-header)',
+        contents: 'var(--height-contents)',
+      },
+      fontFamily: {
+        roboto: 'var(--font-family-roboto)',
+      },
+      fontSize: {
+        regular: 'var(--font-size-regular)',
+        bold: 'var(--font-size-bold)',
+        404: 'var(--font-size-404)',
+      },
+      fontWeight: {
+        regular: 'var(--font-weight-regular)',
+        bold: 'var(--font-weight-bold)',
+        404: 'var(--font-weight-404)',
+      },
+      borderRadius: {
+        sl: 'var(--border-radius-sl)',
+      },
+      borderColor: {
+        list: 'var(--border-list)',
+        input: 'var(--border-input)',
+        scroll: 'var(--border-scroll)',
+      },
+      textColor: {
+        default: 'var(--text-color-default)',
+        bold: 'var(--text-color-bold)',
+        error: 'var(--text-color-error)',
+        blue: 'var(--text-color-blue)',
+      },
+      colors: {
+        main: 'var(--color-main)',
+        sub: 'var(--color-sub)',
+        close: 'var(--color-close)',
+        'contents-box': 'var(--color-contents-box)',
+        disable: 'var(--color-disable)',
+        selected: 'var(--color-selected)',
+        scroll: 'var(--color-scroll)',
+        button: 'var(--color-button)',
+        kako: 'var(--color-kakao)',
+        todo: {
+          red: 'var(--color-todo-red)',
+          yellow: 'var(--color-todo-yellow)',
+          green: 'var(--color-todo-green)',
+          blue: 'var(--color-todo-blue)',
+          orange: 'var(--color-todo-orange)',
+          purple: 'var(--color-todo-purple)',
+          'yellow-green': 'var(--color-todo-yellow-green)',
+          gray: 'var(--color-todo-gray)',
+        },
+      },
+    },
   },
   plugins: [],
 };