Skip to main content

Styling

Overview​

Smart Academic Hub uses Tailwind CSS for styling with custom configuration and components.

Tailwind CSS​

Configuration​

// tailwind.config.js
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
        },
      },
    },
  },
  plugins: [],
};

Usage​

<template>
  <div class="container mx-auto px-4">
    <h1 class="text-3xl font-bold text-gray-900">
      Welcome
    </h1>
    <button class="bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700">
      Click Me
    </button>
  </div>
</template>

Custom Styles​

Global Styles​

/* src/assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-3xl font-bold;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary-600 text-white px-4 py-2 rounded hover:bg-primary-700;
  }
}

Component Styles​

Use scoped styles for component-specific CSS:

<template>
  <div class="custom-component">
    <!-- content -->
  </div>
</template>

<style scoped>
.custom-component {
  /* Component-specific styles */
}
</style>

Responsive Design​

Use Tailwind responsive prefixes:

<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Responsive grid -->
  </div>
</template>

Dark Mode​

Configure dark mode support:

// tailwind.config.js
export default {
  darkMode: 'class',
  // ...
};
<template>
  <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Content
  </div>
</template>

Best Practices​

  1. Use Tailwind utility classes
  2. Extract repeated patterns to components
  3. Use responsive prefixes for mobile-first design
  4. Leverage Tailwind's color system
  5. Keep custom CSS minimal
  6. Use scoped styles when needed
  7. Follow accessibility guidelines