mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 12:13:57 +00:00
George Cushen
4fa40b91e2
Move block-specific CSS from centralized assets/css/blox/ to co-located style.css files within each block directory. The css.html partial now auto-discovers style.css files from bundled and community blocks and concatenates them into the Tailwind entry via resources.Concat, enabling full @apply support while avoiding VFS path resolution issues. Shared biography styles (avatar, ruby) are extracted to blox/shared/css/ and auto-included before per-block styles. Navbar CSS moves to components/ as it's a framework-level concern. The separate community CSS pipeline in site_head.html is removed — all block CSS now flows through a single Tailwind entry point.
Hugo Blox Tailwind CSS v4 Color System
Architecture Overview
This system leverages Tailwind CSS v4's automatic utility generation to provide a comprehensive color system with minimal code.
How It Works
-
Theme Configuration (
config/theme.css)- Colors defined in
@themeblock automatically generate ALL utilities - Includes standard Tailwind colors: gray, slate, zinc, neutral, stone
- Includes themeable colors: primary, secondary
- Colors defined in
-
Theme Files (
themes/*.css)- Small files that override
--color-primary-*and--color-secondary-*variables - Users switch themes by loading different theme CSS files
- No utilities redefined - just color values changed
- Small files that override
-
Custom Utilities (
color-utilities.css)- Only 42 lines vs previous 1,228 lines!
- Contains only custom colors not auto-generated (like
hb-dark)
Available Colors
Standard Colors (always available):
gray-*- Neutral graysslate-*- Cool grayszinc-*- True graysneutral-*- Pure graysstone-*- Warm grays
Themeable Colors (vary by theme):
primary-*- Main theme colorsecondary-*- Accent theme color
Custom Colors:
hb-dark- Hugo Blox brand dark color
Auto-Generated Utilities
For every color defined in @theme, Tailwind automatically creates:
- Background:
bg-{color}-{shade} - Text:
text-{color}-{shade} - Border:
border-{color}-{shade} - Hover:
hover:bg-{color}-{shade},hover:text-{color}-{shade} - Dark mode:
dark:bg-{color}-{shade},dark:text-{color}-{shade} - Gradients:
from-{color}-{shade},to-{color}-{shade} - Focus rings:
focus:ring-{color}-{shade} - All other Tailwind color variants
Shades Available
All colors include 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
Usage Examples
<!-- Standard colors (always available) -->
<div class="bg-gray-100 dark:bg-gray-800">...</div>
<div class="text-slate-700 hover:text-slate-900">...</div>
<!-- Themeable colors (change with theme) -->
<div class="bg-primary-500 hover:bg-primary-600">...</div>
<div class="bg-gradient-to-r from-primary-600 to-secondary-600">...</div>
<!-- Custom colors -->
<div class="bg-hb-dark text-white">...</div>
Benefits
- Dramatically Reduced File Size: 1,228 lines → 42 lines (97% reduction!)
- Automatic Generation: No manual utility definitions needed
- Maintainable: Add new colors just by defining them in
@theme - Consistent: All Tailwind variants automatically available
- Themeable: Easy theme switching via CSS variable overrides
Adding New Colors
To add a new color scale:
-
Define in
config/theme.css:--color-brand-500: 59 130 246; --color-brand-600: 37 99 235; /* etc. */ -
Tailwind automatically generates all utilities:
bg-brand-500,text-brand-600,hover:bg-brand-500, etc.
No manual utility definitions required!