feat: tailwind 및 formatter 설치

wafflestudio · Dec 30, 2024 · 165be45 · 165be45
1 parent 19e79af
commit 165be45
Show file tree

Hide file tree

Showing 11 changed files with 536 additions and 149 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -7,5 +7,6 @@
   "bracketSpacing": true,
   "singleAttributePerLine": true,
   "arrowParens": "always",
-  "endOfLine": "lf"
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/index.html b/index.html
@@ -2,13 +2,26 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Wafflestudio에서 진행하는 2024 WEMADE 프로젝트." />
-    <link rel="icon" type="image/svg+xml" href="https://file.wemade.com/homepage/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
+    <meta
+      name="description"
+      content="Wafflestudio에서 진행하는 2024 WEMADE 프로젝트."
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://file.wemade.com/homepage/favicon.ico"
+    />
     <title>Waffle-WEMADE</title>
   </head>
   <body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
+    <div id="root"></div>
+    <script
+      type="module"
+      src="/src/main.tsx"
+    ></script>
   </body>
-</html>
+</html>
diff --git a/package.json b/package.json
@@ -12,8 +12,11 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.62.10",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -33,6 +36,7 @@
     "husky": "^9.1.7",
     "lint-staged": "^15.2.11",
     "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "react-router-dom": "^7.1.1",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",

diff --git a/postcss.config.ts b/postcss.config.ts
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,21 +1,6 @@
-import './App.css';
-import wemadeLogo from './assets/images/wemade-logo-green.png';
-
 function App() {
   return (
     <>
-      <div>
-        <a
-          href="https://www.wemade.com/"
-          target="_blank"
-        >
-          <img
-            src={wemadeLogo}
-            className="logo"
-            alt="wemade logo"
-          />
-        </a>
-      </div>
       <h1>WEMADE 프로젝트</h1>
     </>
   );

diff --git a/src/index.css b/src/index.css
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,6 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import './index.css';
 import App from './App.tsx';
 
 createRoot(document.getElementById('root')!).render(

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};