Feat/add tailwindcss on top of mui

package.json

@@ -65,6 +65,7 @@
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-prettier": "^5.0.0",
         "eslint-plugin-react": "^7.33.0",
-        "prettier": "^3.0.0"
+        "prettier": "^3.0.0",
+        "tailwindcss": "^3.3.3"
     }
 }

postcss.config.js

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

src/components/BookSearch/BookSearch.css

@@ -16,12 +16,14 @@
     margin-right: 10px;
     letter-spacing: 0.5px;
 
-    &:focus,
-    &:active,
-    &:hover {
-        box-shadow: 2px 4px 16px rgba(28, 32, 36, 0.6);
-    }
+
 }
+.search-input:focus,
+.search-input:active,
+.search-input:hover {
+    box-shadow: 2px 4px 16px rgba(28, 32, 36, 0.6);
+}
+
 
 .search-input:focus {
     outline: none;

src/index.css

@@ -1,3 +1,6 @@
+@tailwind components;
+@tailwind utilities;
+
 body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',

src/index.js

@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { StyledEngineProvider } from '@mui/styled-engine';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
     <React.StrictMode>
-        <App />
+        <StyledEngineProvider injectFirst>
+            <App />
+        </StyledEngineProvider>
     </React.StrictMode>
 );
 

tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  important: "#root",
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}