Install tailwind and catppuccin (#1)

* Install tailwind and init

* configure template path

* add tailwind directives to main css

* Add catppuccin theme

* Add tailwind's generated css to app.js

* Add catppuccin's base class to the document body

* Add catppuccin plugin to tailwind config

* import tailwind generated css in index.js instead of app.js

* tailwind imports moved to index.css

* Add appropriate classes to body tag

portfolio/package.json

@@ -1,20 +1,21 @@
 {
   "name": "portfolio",
   "version": "0.1.0",
-	"homepage": "https://seanidzenga.github.io",
+  "homepage": "https://seanidzenga.github.io",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "portfolio": "file:",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-		"predeploy": "npm run build",
-		"deploy": "gh-pages -d build",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d build",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -39,6 +40,8 @@
     ]
   },
   "devDependencies": {
-    "gh-pages": "^6.1.1"
+    "@catppuccin/tailwindcss": "^0.1.6",
+    "gh-pages": "^6.1.1",
+    "tailwindcss": "^3.4.10"
   }
 }

portfolio/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -7,7 +11,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
-code {
+code, .code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+}

portfolio/src/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
+import './output.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
@@ -11,6 +12,10 @@ root.render(
   </React.StrictMode>
 );
 
+document.body.classList.add("macchiato"); // sets the default catppuccin flavour but can be swapped dynamically
+document.body.classList.add("bg-base"); // adds the bg-base class to the body ensuring we always have a dark background.
+document.body.classList.add("text-text") // set base text colour to --ctp-text
+
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

portfolio/tailwind.config.js

@@ -0,0 +1,15 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{html,js}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require("@catppuccin/tailwindcss")({
+      defaultFlavour: "macchiato"
+    }),
+  ],
+}
+