Styling & Theming

The Campus Template utilizes a modern, hybrid styling approach that combines the utility of Tailwind CSS, the structural robustness of Material UI (MUI), and the pre-styled components of Material Tailwind. This architecture allows for rapid development while maintaining a high degree of visual customization.

Styling Frameworks

The project leverages three primary libraries for its design system:

1. Tailwind CSS: Used for utility-first styling, layout adjustments, spacing, and custom typography.
2. Material UI (v5): Used for layout structures (Grid, Box, Stack) and complex UI components like Buttons and Inputs.
3. Material Tailwind: Used for specialized high-level components such as Tabs and interactive UI elements.

Design System & Branding

Primary Colors

The template follows a specific color palette often found in academic institutions. These colors are frequently applied via Tailwind classes or inline styles:

• Primary Blue (#1169bf): Used for headers, navigation elements, and primary buttons.
• Accent Orange (#f36710): Used for hover states, icons, and highlighting important actions.

Typography

Typography is managed through Tailwind CSS. The template primarily uses the font-manrope and standard sans-serif stacks. Font sizes are standardized using Tailwind's scale (e.g., text-sm, text-lg, text-2xl).

Component Usage Patterns

To maintain consistency, developers should follow the established pattern of using MUI for structural layout and Tailwind for visual styling.

Combining MUI and Tailwind

The template frequently uses MUI's Grid for responsiveness while applying Tailwind classes for internal spacing and decorative styles.

import { Grid, Button } from '@mui/material';

function MyComponent() {
  return (
    <Grid container className="px-10 py-5 bg-gray-50">
      <Grid item xs={12} md={6}>
        <h2 className="text-2xl font-bold text-[#1169bf]">Section Title</h2>
        <p className="mt-4 text-gray-600">This is a description using Tailwind for margins and colors.</p>
        <Button 
          variant="outlined" 
          className="mt-6 border-[#1169bf] text-[#1169bf] hover:bg-[#1169bf] hover:text-white"
        >
          Learn More
        </Button>
      </Grid>
    </Grid>
  );
}

Material Tailwind Components

For components like Tabs, use the Material Tailwind library. Note that these components often require specific configurations for active states.

import { Tabs, TabsHeader, Tab } from "@material-tailwind/react";

// Usage in Gallery or Navigation
<Tabs value={activeTab}>
  <TabsHeader className="bg-[#1169bf] text-white">
    <Tab value="image" onClick={() => setActiveTab("image")}>
      Image Gallery
    </Tab>
    <Tab value="video" onClick={() => setActiveTab("video")}>
      Video Gallery
    </Tab>
  </TabsHeader>
</Tabs>

Responsive Design

The template is mobile-first. Responsive behavior is handled through:

• Tailwind Breakpoints: Using sm:, md:, lg:, and xl: prefixes for conditional styling.
• MUI Grid: Using the xs, sm, md, and lg props to define column spans across devices.

| Breakpoint | Range | Usage | | :--- | :--- | :--- | | xs | < 600px | Mobile devices (Vertical stacks) | | sm | 600px+ | Tablets | | md | 900px+ | Small laptops | | lg | 1200px+ | Desktops |

Best Practices for Customization

1. Global Styles: For project-wide changes (e.g., changing the primary blue), update the tailwind.config.js file or the root CSS variables.
2. Hover Effects: Use the group and group-hover Tailwind classes to create synchronized hover animations between parent and child elements.
3. Consistency: Always check if a component exists in the src/Components directory before creating new styled elements to ensure the UI remains cohesive.