Adding in tailwindcss and configs

2022-03-12 19:41:39 -07:00
parent d8beede420
commit ef5cdba060
8 changed files with 59 additions and 10 deletions
--- a/package.json
+++ b/package.json
@@ -25,11 +25,15 @@
    "html-webpack-plugin": "^5.5.0",
    "image-minimizer-webpack-plugin": "^3.2.3",
    "mini-css-extract-plugin": "^2.6.0",
+    "postcss": "^8.4.8",
    "postcss-loader": "^6.2.1",
+    "postcss-preset-env": "^7.4.2",
+    "querystring-es3": "^0.2.1",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
+    "tailwindcss": "^3.0.23",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-middleware": "^5.3.1",
@@ -37,6 +41,7 @@
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
+    "@react-three/drei": "^8.16.5",
    "@react-three/fiber": "^7.0.26",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,7 @@
+const tailwindcss = require('tailwindcss');
+module.exports = {
+  plugins: [
+    'postcss-preset-env',
+    tailwindcss
+  ],
+};
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,6 +1,7 @@
 import '../styles/styles.scss';
 import { useRef, useState } from 'react';
 import { Canvas, useFrame } from '@react-three/fiber';
+import { PresentationControls } from '@react-three/drei'

 const Box = (props) => {
  // This reference gives us direct access to the THREE.Mesh object
@@ -29,14 +30,18 @@ const App = () => {
  return (
    <>
      <nav>
-        nav
+        <h1 className="underline text-xl">Nav</h1>
      </nav>
-      <Canvas>
-        <ambientLight />
-        <pointLight position={[10, 10, 10]} />
-        <Box position={[-1.2, 0, 0]} />
-        <Box position={[1.2, 0, 0]} />
-      </Canvas>
+      <div id="canvas-container">
+        {/* <Canvas>
+          <PresentationControls global zoom={0.8} rotation={[0, -Math.PI / 4, 0]} polar={[0, Math.PI / 4]} azimuth={[-Math.PI / 4, Math.PI / 4]}>
+            <ambientLight />
+            <pointLight position={[10, 10, 10]} />
+            <Box position={[-1.2, 0, 0]} />
+            <Box position={[1.2, 0, 0]} />
+          </PresentationControls>
+        </Canvas> */}
+      </div>
    </>
  );
 };
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -1,8 +1,15 @@
+import { Suspense } from 'react';
+import { Loader } from '@react-three/drei';
 import { render } from 'react-dom';
 import App from '../components/App';

 render(
-    <App />,
+  <>
+    <Suspense fallback={null}>
+      <App />
+    </Suspense>
+    <Loader />
+  </>,
   document.getElementById("root") );

 if (module['hot']) {
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -1,3 +1,12 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 main {
-  background-color: black;
+  #canvas-container {
+    canvas {
+      width: 100%;
+      height: 100%;
+    }
+  }
 }
--- a/src/views/index.html
+++ b/src/views/index.html
@@ -4,7 +4,9 @@
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
+  <title>Designer and Developer</title>
+
+  <link rel="stylesheet" href="https://use.typekit.net/bcf6wms.css">
 </head>
 <body>
  <main id="root"></main>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.html', './src/components/**/*.jsx'],
+  content: ["./src/**/*.{html,js,jsx}"],
+  theme: {
+    extend: {},
+    fontFamily: {
+      sans: ['Museo Sans']
+    }
+  },
+  plugins: [],
+}
--- a/webpack.common.js
+++ b/webpack.common.js
@@ -14,6 +14,9 @@ const path = require('path');
 module.exports = {
  resolve: {
    extensions: ['.js', '.jsx'],
+    fallback: {
+      "querystring": require.resolve("querystring-es3")
+    }
  },
  module: {
    rules: [