3D-TeeLab

Set Up

We are building this application by using Vite (Building Tool).

Vite is a fast and opinionated build tool and development server for modern web applications. It was developed with a focus on providing a streamlined and efficient development experience. Vite is particularly popular in the JavaScript ecosystem, often used with frameworks like Vue.js and React.

Create a new Vite Project

npm create vite@latest -- --template react client

Add the required dependencies

npm install three @react-three/fiber @react-three/drei maath valtio react-color framer-motion

Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;