add: enabled tailwind jit (#1)

* add: enabled tailwind jit

* add: min-w-280px

package.json

@@ -19,18 +19,18 @@
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vitejs/plugin-react-refresh": "^1.3.1",
-    "autoprefixer": "^10.2.5",
+    "autoprefixer": "10.2.5",
     "eslint": "^7.22.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.3.1",
     "eslint-plugin-react": "^7.22.0",
-    "postcss": "^8.2.8",
+    "postcss": "8.2.10",
     "prettier": "^2.2.1",
-    "tailwindcss": "^2.0.4",
-    "typescript": "^4.1.2",
-    "vite": "^2.1.0"
+    "tailwindcss": "2.1.1",
+    "typescript": "4.2.4",
+    "vite": "2.2.1"
   }
 }

postcss.config.js

@@ -0,0 +1,7 @@
+// postcss.config.js
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

src/pages/Diagram.tsx

@@ -5,7 +5,7 @@ function Diagram() {
   return (
     <div className="h-screen p-12 bg-yellow-100 font-sans tracking-wider">
       <div className="flex items-center">
-        <div className="p-6 font-bold bg-white text-lg rounded-2xl min-w-80 max-w-160 shadow-xl">
+        <div className="p-6 font-bold bg-white text-lg rounded-2xl min-w-[280px] max-w-160 shadow-xl">
           <ContentEditable value="" onChange={() => {}} onBlur={() => {}} onResize={(props) => console.log(props)} />
         </div>
       </div>

tailwind.config.js

@@ -1,5 +1,6 @@
 
 module.exports = {
+  mode: 'jit',
   purge: {
     enabled: process.env.NODE_ENV === 'production',
     safeList: [],