🎨 Styling

This project uses Tailwind CSS  for utility-first styling and DaisyUI  for ready-to-use UI components.

📦 Technologies Used

Tailwind CSS – A utility-first CSS framework for rapidly building custom designs.

DaisyUI – A component library that works with Tailwind CSS to speed up UI development.

Using Tailwind Classes

Stick to utility classes instead of writing custom CSS. This keeps styles consistent and easier to maintain.

Example:

<div className="p-4 bg-base-100 rounded-xl shadow">
  <h2 className="text-xl font-bold">Card Title</h2>
  <p className="text-sm text-gray-500">Card description goes here.</p>
</div>

Changing the global styles

Inside of the tailwind.config.js file, there is a code block that looks like this

colors: {
    "primary": "#0B63DE",
    "secondary": "#095AC4",
    "background": "text-gray-800"
},

By changing the values for the primary, secondary, or background color, it will reflect throughout your whole codebase through Tailwind CSS.

Adding pre-built Components

If you would like to add your own components, I strongly suggest using DaisyUI components .

These components are already being used throughout the project, making it so you don’t have to reinvent the wheel and get components right out of the box.