feat: add custom variables in tailwind config

Author: Miran-Firdausi

package.json

@@ -13,11 +13,12 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@fontsource/poppins": "^5.0.8",
+    "@vitejs/plugin-react": "^4.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.1",
     "react-toastify": "^10.0.4",
-    "@vitejs/plugin-react": "^4.2.1",
     "vite": "^5.1.0"
   },
   "devDependencies": {

src/Teams/Teams.jsx

@@ -0,0 +1,6 @@
+function Teams() {
+    return <div>Teams</div>;
+  }
+  
+  export default Teams;
+  

src/assets/styles/index.css

@@ -1,6 +1,7 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+@import '@fontsource/poppins';
 
 /* Reset default browser styles */
 html,

tailwind.config.js

@@ -4,12 +4,19 @@ export default {
   theme: {
     extend: {
       colors: {
-        background: '#232323',
-        primary: '#F24E3F',
-        text: '#F7F7F7',
+        background: "#232323",
+        primary: "#E76941",
+        text: "#F7F7F7",
+      },
+      screens: {
+        xs: "0px",
+        sm: "600px",
+        md: "900px",
+        lg: "1200",
+        xl: "1536px",
       },
       fontFamily: {
-        sans: ['Roboto', 'sans-serif'],
+        poppins: ['Poppins', 'sans-serif'],
       },
     },
   },