FEAT: Add plugin in postcss

이미지 fallback을 위한 image-set플러그인 추가
nalsae · Aug 2, 2022 · 6f28528 · 6f28528
1 parent 7c39833
commit 6f28528
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 7 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.14",
     "postcss-cli": "^10.0.0",
+    "postcss-image-set-function": "^4.0.7",
     "prettier": "^2.7.1",
     "tailwindcss": "^3.1.7"
   }

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,6 +1,7 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+  plugins: [
+    require('tailwindcss'),
+    require('autoprefixer'),
+    require('postcss-image-set'),
+  ],
+};
diff --git a/src/images/crown.png b/src/images/crown.png
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -2,7 +2,20 @@
 module.exports = {
   content: ['./src/**/*.{html,js}', './index.html'],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        pink1: '#FF7C98',
+        pink2: '#E01883',
+        navy1: '#224289',
+        beige1: '#F9F8F7',
+        brown1: '#918984',
+        brown2: '#726454',
+        white: '#FEFEFE',
+        gray: '#CDCCD5',
+        black1: '#2F231C',
+        black2: '#321C15',
+      },
+    },
   },
   plugins: [],
 };