From 2a51d7f1d03712ca2f90b9d3f434552b1a3dff15 Mon Sep 17 00:00:00 2001 From: BlackBond06 Date: Tue, 12 Sep 2023 18:55:13 +0100 Subject: [PATCH 1/7] postcss.config.js --- postcss.config.js | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 postcss.config.js 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: {}, + }, +} From 2d3c70fa13dda6d90da8cc5d40cb94b26cd2cb97 Mon Sep 17 00:00:00 2001 From: BlackBond06 Date: Tue, 12 Sep 2023 18:58:41 +0100 Subject: [PATCH 2/7] Update TailwindCSS configuration --- tailwind.config.js | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 tailwind.config.js 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 From d65acfe5c866ca65eeeeca00c2d96b1de05c8074 Mon Sep 17 00:00:00 2001 From: BlackBond06 Date: Tue, 12 Sep 2023 19:01:14 +0100 Subject: [PATCH 3/7] Add StyleEngineProvider to handle styles injection order --- src/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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( - + + + ); From bf7bc84ca4b81f93f0330ecf1be41fe70df9bc0f Mon Sep 17 00:00:00 2001 From: BlackBond06 Date: Tue, 12 Sep 2023 19:03:47 +0100 Subject: [PATCH 4/7] Add Tailwind CSS components and utilities --- src/index.css | 3 +++ 1 file changed, 3 insertions(+) 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', From 474a740759b641f8dcf72102236045d17da83373 Mon Sep 17 00:00:00 2001 From: BlackBond06 Date: Tue, 12 Sep 2023 19:08:06 +0100 Subject: [PATCH 5/7] Removed nesting styles to address Tailwind CSS nesting styles warning --- src/components/BookSearch/BookSearch.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) 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; From b36e4529eb53e16fad157cb3ecb7f0ff661a320d Mon Sep 17 00:00:00 2001 From: BlackBond06 Date: Tue, 12 Sep 2023 19:09:53 +0100 Subject: [PATCH 6/7] Update package.json to add tailwindcss --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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" } } From 410f721e0e96c03b5cc1188d36a3e77368794514 Mon Sep 17 00:00:00 2001 From: BlackBond06 Date: Tue, 12 Sep 2023 19:11:03 +0100 Subject: [PATCH 7/7] Update package.lock.json to add tailwindcss --- package-lock.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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" },