setup tailwind and update cra

package.json

@@ -9,7 +9,7 @@
     "react": "^16.13.1",
     "react-component-export-image": "^0.1.6",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
+    "react-scripts": "^5.0.1",
     "react-select": "^3.1.0"
   },
   "scripts": {
@@ -32,5 +32,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.4",
+    "postcss": "^8.4.12",
+    "tailwindcss": "^3.0.24"
   }
 }

postcss.config.js

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

src/components/App.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
+/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@900&display=swap');
 
 html,
 body,
@@ -41,4 +41,4 @@ a:hover{
   footer {
     margin-top: 40px;
   }
-}
+} */

src/components/App.js

@@ -5,7 +5,7 @@ class App extends React.Component {
 
     render() {
         return (
-            <div className="content">
+            <div className="content bg-slate-400">
                 <Navbar />
                 <ConfigCover />
             </div>

src/components/ConfigCover.css

@@ -79,6 +79,16 @@ input {
 		background-color: #f2f2f2;
 
 }
+.input-color{
+padding:1px;
+	width:40px;
+	height:40px;
+}
+
+.font-size{
+	padding:2px;
+	width:50px;
+}
 
 .input-md{
 	width:100px;

src/components/ConfigCover.js

@@ -59,47 +59,23 @@ class ConfigCover extends React.Component {
 					></input>
 
 
-					<div className="border rounded my-2 ml-2 p-1">
+					<div className=" rounded my-2 ml-2 p-1">
 
-						<h6 className="">Background</h6>
+						{/* <h6 className="">Background</h6> */}
 
 						<div className="flex-card">
-							<div className="mt-3 mx-2">
+							<div className=" border rounded p-1 flex-row ">
-								<span>Color</span>
+								<span>{ this.state.bgColor}</span>
 								<input type="color" value={this.state.bgColor}
 									onChange={(e) => this.setState({ bgColor: e.target.value })}
-									className="input-md form-control"
+									className="input-color form-control"
 								/>
 							</div>
 
-							<div className="mx-2">
+							<div className="flex-row">
-								<label>Pattern</label>
+								<span>Font size</span>
-								<select
+								<input type="number" className="font-size" min="20"/>
-									onChange={(e) => this.setState({ pattern: e.target.value })}
+					</div>
-									className="form-control input-md"
-									value={this.state.pattern}>
-
-									<option>None</option>
-									<option>graph-paper</option>
-									<option>jigsaw</option>
-									<option>hideout</option>
-									<option>dots</option>
-									<option>falling-triangles</option>
-									<option>circuit-board</option>
-									<option>temple</option>
-									<option>anchors</option>
-									<option>brickwall</option>
-									<option>overlapping-circles</option>
-									<option>wiggle</option>
-									<option>tic-tac-toe</option>
-									<option>leaf</option>
-									<option>bubbles</option>
-									<option>squares</option>
-									<option>explorer</option>
-									<option>jupiter</option>
-									<option>sun</option>
-								</select>
-							</div>
 
 						</div>
 					</div>

src/components/Navbar.js

@@ -4,7 +4,7 @@ import logo from '../assets/icons/favicon.png';
 const Navbar = () => {
 
     return (
-        <nav className="navbar">
+        <nav className=" bg-red-200 text-4xl">
             <h4><img src={logo} alt="logo" className="logo"/>Coverview</h4>
             <a href="https://github.com/rutikwankhade/CoverView"
                 target="_blank" rel="noopener  noreferrer" class="star-btn">

src/index.css

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

src/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import './index.css';
 
 import App from './components/App';
 

tailwind.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+ content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}