diff --git a/package-lock.json b/package-lock.json
index a687f95..7ef99e2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,7 +42,8 @@
                 "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"
             }
         },
         "node_modules/@aashutoshrathi/word-wrap": {
@@ -16607,9 +16608,9 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.3.2",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz",
-            "integrity": "sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==",
+            "version": "3.3.3",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
+            "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
                 "arg": "^5.0.2",
@@ -16631,7 +16632,6 @@
                 "postcss-load-config": "^4.0.1",
                 "postcss-nested": "^6.0.1",
                 "postcss-selector-parser": "^6.0.11",
-                "postcss-value-parser": "^4.2.0",
                 "resolve": "^1.22.2",
                 "sucrase": "^3.32.0"
             },
diff --git a/package.json b/package.json
index 54a3d2a..1ea8342 100644
--- a/package.json
+++ b/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"
     }
 }
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/components/BookSearch/BookSearch.css b/src/components/BookSearch/BookSearch.css
index da7e24a..9012361 100644
--- a/src/components/BookSearch/BookSearch.css
+++ b/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;
diff --git a/src/index.css b/src/index.css
index 4b326a5..0a27d52 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,6 @@
+@tailwind components;
+@tailwind utilities;
+
 body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
diff --git a/src/index.js b/src/index.js
index 7400e9b..5cfba71 100644
--- a/src/index.js
+++ b/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>
 );
 
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..12e7314
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  important: "#root",
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
\ No newline at end of file