TailWind 기본 설정 (#7)

* chore: tailwind, postcss, autoprefixer 모듈 설치

* chore: config파일들을 eslint가 무시하도록 변경

* chore: tailwind 기본 init

Author: MINJE-98

.eslintrc.json

@@ -15,11 +15,16 @@
     "es2021": true
   },
   "plugins": ["@typescript-eslint", "prettier"],
-  "extends": ["next/core-web-vitals","airbnb", "airbnb-typescript", "plugin:prettier/recommended"],
+  "extends": [
+    "next/core-web-vitals",
+    "airbnb",
+    "airbnb-typescript",
+    "plugin:prettier/recommended"
+  ],
   "settings": {
     "react": {
       "version": "detect"
     }
   },
-  "ignorePatterns": ["node_modules/", ".next/*"]
+  "ignorePatterns": ["node_modules/", ".next/*", "*.config.js"]
 }

package.json

@@ -19,6 +19,7 @@
     "@types/react-dom": "17.0.14",
     "@typescript-eslint/eslint-plugin": "^5.0.0",
     "@typescript-eslint/parser": "^5.0.0",
+    "autoprefixer": "^10.4.4",
     "eslint": "8.12.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^16.2.0",
@@ -29,7 +30,9 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "postcss": "^8.4.12",
     "prettier": "^2.6.2",
+    "tailwindcss": "^3.0.23",
     "typescript": "4.6.3"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

styles/globals.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
   padding: 0;

tailwind.config.js

@@ -0,0 +1,58 @@
+module.exports = {
+  purge: {
+    enabled: true,
+    content: ["./pages/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}"],
+  },
+  darkMode: "media", // or 'media' or 'class'
+  theme: {
+    screen: {
+      sm: { min: "640px", max: "767px" },
+      md: { min: "768px", max: "1023px" },
+      lg: { min: "1024px", max: "1279px" },
+      xl: { min: "1280px", max: "1535px" },
+      "2xl": { min: "1536px" },
+    },
+    extend: {
+      fontFamily: {
+        "eng-sub-font-1": ["Literata", "sans-serif"],
+        "eng-sub-font-2": ["Poppins", "sans-serif"],
+      },
+      colors: {
+        javascript: "#f1DD35",
+        typescript: "#3178c6",
+        html: "#e44b23",
+        react: "#61DBFB",
+        swift: "#ffac45",
+        database: "#000000",
+        git: "#171515",
+        nestjs: "#e0234e",
+        mysql: "#00758F",
+        aws: "#FF9900",
+        docker: "#0DB7ED",
+        redis: "#A41E11",
+        nodejs: "#68A063",
+        css: "#264de4",
+      },
+    },
+  },
+  variants: {
+    extend: {
+      keyframes: {
+        "fade-in-down": {
+          "0%": {
+            opacity: "0",
+            transform: "translateY(-10px)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateY(0)",
+          },
+        },
+      },
+      animation: {
+        "fade-in-down": "fade-in-down 0.5s ease-out",
+      },
+    },
+  },
+  plugins: [require("@tailwindcss/typography")],
+};