build: change the way of importing tailwindcss

README.md

@@ -22,7 +22,7 @@ yarn build
 
  
 
-## Acknowledgements
+## Credits
 
 - [macOS Big Sur](https://www.apple.com/in/macos/big-sur/)
 - [macOS Icon Gallery](https://www.macosicongallery.com/)

craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [
+        require("tailwindcss"),
+        require("autoprefixer")
+      ]
+    }
+  }
+}

package.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "dev": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "lint": "eslint --ext .js ./",
     "lint-fix": "eslint --fix --ext .js ./"
@@ -55,14 +55,13 @@
     ]
   },
   "dependencies": {
+    "@craco/craco": "^6.1.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "date-fns": "2.16.1",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "husky": "^4.3.8",
-    "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -71,10 +70,15 @@
     "react-rnd": "^10.2.4",
     "react-scripts": "4.0.3",
     "react-webcam": "5.2.2",
-    "sort-package-json": "^1.49.0",
     "web-vitals": "^1.0.1"
   },
   "devDependencies": {
+    "autoprefixer": "^9",
+    "husky": "^4.3.8",
+    "lint-staged": "^10.5.4",
+    "postcss": "^7",
+    "sort-package-json": "^1.49.0",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "typescript": "4.2.4"
   }
 }

public/index.html

@@ -24,7 +24,6 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jost:300,400,500,700" />
     <title>Xiaohan Zou's Playground</title>
   </head>

src/components/Window.js

@@ -30,10 +30,10 @@ class TrafficLights extends Component {
 export default class Window extends Component {
   constructor(props) {
     super(props);
-    const width = props.width ? props.width : "640";
-    const height = props.height ? props.height : "400";
     const maxW = document.body.offsetWidth;
     const maxH = document.body.offsetHeight;
+    const width = Math.min(maxW, props.width ? props.width : "640");
+    const height = Math.min(maxH, props.height ? props.height : "400");
     this.state = {
       width: width,
       height: height,
@@ -54,9 +54,16 @@ export default class Window extends Component {
   }
 
   resize = () => {
+    const maxW = document.body.offsetWidth;
+    const maxH = document.body.offsetHeight;
+    const width = Math.min(maxW, this.state.width);
+    const height = Math.min(maxH, this.state.height);
+
     this.setState({
-      maxW: document.body.offsetWidth,
-      maxH: document.body.offsetHeight
+      maxW: maxW,
+      maxH: maxH,
+      width: width,
+      height: height
     });
   };
 

src/index.js

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
-import "./styles.css";
+import "./styles/index.css";
+import "./styles/index.tailwind.css";
 
 import Desktop from "./components/Desktop";
 import Login from "./components/Login";

src/styles/index.tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.{js}', './public/index.html'],
+  darkMode: false,
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}