Tailwind CSS & Theming System
Relevant source files
The following files were used as context for generating this wiki page:
The Tailwind CSS and theming system in KernelForge-App provides a structured framework for styling the Android kernel development dashboard. It utilizes Tailwind CSS version 3.4.1 for utility-first styling and integrates with Shadcn UI components to maintain visual consistency. The system enforces a dark-themed, high-contrast aesthetic suitable for technical development environments.
This system manages global styles, font families, and a color palette mapped to CSS variables. It ensures accessibility and responsive design across the src/pages, src/components, and src/app directories.
Core Configuration and Architecture
The project configures Tailwind CSS through tailwind.config.ts and components.json. The configuration extends the default Tailwind theme to include project-specific design tokens for typography, colors, and animations.
System Configuration
The application uses the dark class for its theme mode and targets files with .js, .ts, .jsx, .tsx, and .mdx extensions for style injection.
Sources: tailwind.config.ts:4-12, components.json:11-20
Key Styles and Aliases
| Config Key | Value/Path | Description |
|---|---|---|
darkMode | ['class'] | Enables class-based dark mode. |
content | ./src/**/*.{js,ts,jsx,tsx} | Directories scanned for utility classes. |
baseColor | neutral | Default Shadcn UI base color. |
cssVariables | true | Enables HSL variable mapping. |
Sources: tailwind.config.ts:4-8, components.json:8-10
Typography and Theming
The theming system defines three distinct font families to categorize information types: body text, headlines, and technical output.
- Body (
font-body): Uses 'Inter' for general interface text. - Headline (
font-headline): Uses 'Space Grotesk' for titles and badges. - Code (
font-code): Uses 'Source Code Pro' for logs and terminal output.
Sources: tailwind.config.ts:14-18, src/app/layout.tsx:32-34
Color Palette Mapping
The system maps functional names (e.g., primary, accent) to HSL CSS variables defined in the global stylesheet.
| Name | Variable | Visual Purpose |
|---|---|---|
| Background | --background | Main application background (Dark Green/Black). |
| Primary | --primary | Neon green highlights for success/active states. |
| Secondary | --secondary | Purple highlights for experimental/accent states. |
| Muted | --muted | Subdued text and borders. |
| Destructive | --destructive | Error states and warnings. |
| Sidebar | --sidebar-background | Specialized background for navigation. |
Sources: src/app/globals.css:7-39, tailwind.config.ts:21-69
Global Styles and Custom Utilities
Global styles are defined in src/app/globals.css using Tailwind's @layer directive. This ensures custom base styles and utilities integrate correctly with the utility-first workflow.
Base Layer
The base layer applies the theme's background and text colors to the body element and sets standard border colors for all elements. It also activates advanced OpenType features like rlig (Required Ligatures) and calt (Contextual Alternates).
Sources: src/app/globals.css:43-51
Custom Utility Classes
The project implements specialized utilities for the kernel development aesthetic:
.neon-glow: Adds a green outer shadow to primary buttons and indicators..purple-glow: Adds a purple outer shadow to secondary actions..code-scrollbar: Customizes webkit scrollbars for log areas using themutedcolor palette.
Sources: src/app/globals.css:54-71, src/app/page.tsx:210
Integration with Components
Layout components utilize the configured theme through the SidebarProvider and standard Tailwind classes. The RootLayout sets the dark class on the html element, enforcing the project's dark theme globally.
Component-Specific Theming Examples
Components like the Badge and Card use the extended color palette to indicate system status:
- Device Status:
border-primary/30 bg-primary/5 text-primaryfor codename badges. - Experimental Patches:
border-secondary/30 bg-secondary/5 text-secondaryfor device models. - Building Status:
text-secondary animate-pulseindicates an active compilation job.
Sources: src/app/page.tsx:203-215
Summary
The Tailwind CSS & Theming System in KernelForge-App establishes a specialized "hacker" aesthetic using a dark green and purple color palette. By extending the Tailwind configuration with specific font families (Inter, Space Grotesk, Source Code Pro) and custom glow utilities, the system provides clear visual hierarchy for kernel development tasks. The architecture relies on HSL CSS variables, allowing for consistent color application across both custom components and Shadcn UI primitives.