IntroductionFrontendStylesheet

Introduction

This configuration demonstrates the use of Tailwind CSS for defining a consistent design system across the application. By utilizing @tailwind directives, the code integrates Tailwind’s pre-built base styles, components, and utility classes while layering customizations for specific requirements.

The code also introduces CSS variables to define theming for light and dark modes, ensuring adaptability and ease of maintenance. This approach empowers developers to maintain a centralized styling structure that enhances scalability and consistency across the project.

 
@tailwind base;
@tailwind components;
@tailwind utilities;
 
/* Fallback font family for the entire document */
body {
  font-family: Arial, Helvetica, sans-serif;
}
 
/* Custom utility for balanced text wrapping */
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
 
/* Base layer: Define CSS variables for theming */
@layer base {
  :root {
    /* Light theme variables */
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
 
    /* Sidebar-specific variables */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
 
  .dark {
    /* Dark theme variables */
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
 
    /* Sidebar-specific variables */
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}
 
/* Global styles */
@layer base {
  * {
    @apply border-border;
  }
 
  body {
    @apply bg-background text-foreground;
  }
}

Explanation

1. Tailwind Base, Components, and Utilities

  • @tailwind base: Includes Tailwind’s base styles for standardizing browsers’ default styling.
  • @tailwind components: Adds pre-defined, reusable Tailwind components.
  • @tailwind utilities: Generates utility classes for quick and consistent styling.

2. Custom Utility Classes

  • .text-balance: Ensures balanced text wrapping using the CSS property text-wrap: balance.

3. Theming with CSS Variables

  • Variables for both light and dark themes are defined inside the :root and .dark selectors.
  • These variables control key aspects of the design, such as:
    • Colors: Backgrounds, borders, text colors, and accents.
    • Chart Colors: For charts and data visualizations.
    • Sidebar Styling: Custom colors for sidebar backgrounds, borders, and accents.
    • Radius: A consistent border radius (0.5rem) for components.

4. Global Styling

  • Global styles are applied using the @layer base directive:
    • All elements (*) have the border-border utility class applied for consistent borders.
    • The body element uses the background and foreground colors from the defined theme variables.

Benefits

  • Customizability: Centralized theme variables make it easy to adjust colors and design system-wide.
  • Dark Mode Support: Separate variables for .dark mode ensure seamless theme switching.
  • Global Consistency: Base styles and utility classes promote a uniform look across the application.
LayoutAuthentication