[Feat] Tailwind 초기 세팅 및 theme 세팅

apps/web/.eslintrc.cjs

@@ -26,7 +26,7 @@ module.exports = {
   parserOptions: {
     project: [baseConfig, appConfig, nodeConfig],
   },
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'postcss.config.js', 'tailwind.config.ts'],
   rules: {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'import/no-unresolved': ['error', { ignore: ['^/'] }],

apps/web/package.json

@@ -22,10 +22,13 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
-    "eslint": "^8.57.0",
     "globals": "^15.11.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.14",
     "typescript": "~5.6.2",
     "vite": "^5.4.10",
     "vite-tsconfig-paths": "^5.0.1"

apps/web/postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

apps/web/src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import './styles/global.css';
 
 import App from '@/App';
 

apps/web/src/styles/global.css

@@ -0,0 +1,35 @@
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard-dynamic-subset.css');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    /* colors */
+    --purple-700: #452bd9;
+    --purple-600: #5031ff;
+    --purple-500: #7057ff;
+    --purple-400: #917eff;
+    --purple-300: #b4a7ff;
+    --purple-200: #d5ceff;
+    --purple-100: #eeebff;
+
+    --black: #1e1e1e;
+    --black-alpha-60: rgba(30, 30, 30, 0.6);
+    --grey-900: #5b5d60;
+    --grey-800: #777a7d;
+    --grey-700: #999ea2;
+    --grey-500: #d8dee4;
+    --grey-400: #e0e5e9;
+    --grey-300: #e5e9ed;
+    --grey-200: #edf0f3;
+    --grey-100: #f3f5f7;
+    --grey-50: #fbfcfc;
+    --white: #ffffff;
+
+    --red: #f45c55;
+    --yellow: #ffe04c;
+    --green: #2ddd93;
+  }
+}

apps/web/tailwind.config.ts

@@ -0,0 +1,132 @@
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx}',
+    './src/components/**/*.{js,ts,jsx,tsx}',
+    './src/*.tsx',
+  ],
+  theme: {
+    fontFamily: {
+      sans: ['Pretendard', ...fontFamily.sans],
+    },
+    extend: {
+      // color
+      backgroundColor: {
+        primary: 'var(--purple-500)',
+        secondary: 'var(--purple-200)',
+        teritary: 'var(--purple-100)',
+        alt: 'var(--grey-500)',
+        weak: 'var(--grey-50)',
+        white: 'var(--white)',
+        black: 'var(--black)',
+        overlay: 'var(--black-alpha-60)',
+      },
+      textColor: {
+        main: 'var(--black)',
+        alt: 'var(--grey-900)',
+        weak: 'var(--grey-700)',
+        primary: 'var(--purple-500)',
+        white: 'var(--white)',
+        error: 'var(--red)',
+      },
+      borderColor: {
+        main: 'var(--grey-300)',
+        primary: 'var(--purple-500)',
+        error: 'var(--red)',
+      },
+
+      // font
+      fontSize: {
+        head1: [
+          '1.75rem',
+          {
+            lineHeight: '34px',
+            fontWeight: '700',
+          },
+        ],
+        head2: [
+          '1.5rem',
+          {
+            lineHeight: '30px',
+            fontWeight: '700',
+          },
+        ],
+        head3: [
+          '1.25rem',
+          {
+            lineHeight: '28px',
+            fontWeight: '700',
+          },
+        ],
+        title1: [
+          '1.125rem',
+          {
+            lineHeight: '24px',
+            fontWeight: '600',
+          },
+        ],
+        title2: [
+          '1rem',
+          {
+            lineHeight: '20px',
+            fontWeight: '600',
+          },
+        ],
+        body1: [
+          '1rem',
+          {
+            lineHeight: '24px',
+            fontWeight: '500',
+          },
+        ],
+        body2: [
+          '0.875rem',
+          {
+            lineHeight: '20px',
+            fontWeight: '500',
+          },
+        ],
+        body3: [
+          '0.875rem',
+          {
+            lineHeight: '20px',
+            fontWeight: '400',
+          },
+        ],
+        body4: [
+          '0.75rem',
+          {
+            lineHeight: '16px',
+            fontWeight: '500',
+          },
+        ],
+        label1: [
+          '0.875rem',
+          {
+            lineHeight: '16px',
+            fontWeight: '600',
+          },
+        ],
+      },
+
+      // borderRadius
+      borderRadius: {
+        base: '0.25rem',
+        md: '0.375rem',
+        lg: '0.5rem',
+        full: '9999px',
+      },
+
+      // boxShadow
+      boxShadow: {
+        normal: '0px 1px 2px 0px var(--grey-500)',
+        up: '0px 2px 8px 0px var(--grey-500)',
+        floating: '0px 16px 28px 0px var(--grey-500), 0px 0px 4px 0px var(--grey-500)',
+      },
+    },
+  },
+};
+
+export default config;