mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 18:14:12 +00:00
George Cushen
04f3b2e8ae
Modern re-design of the main Resume block. Awards block icons are no longer tied to the 'brands' pack - any pack can be used and specified in the form `icon: <pack>/<icon> Refactor Tailwind CSS theming to support full primary/secondary palettes Refactors the theme system to correctly apply primary and secondary color palettes from theme packs. Previously, Tailwind's build-time resolution of CSS variables in the `@theme` block caused theme pack colors to be overridden by the default blue theme. This commit resolves the issue by adopting a best-practice, two-layer token system: 1. All theme packs now define `--hb-primary-*-rgb` and `--hb-secondary-*-rgb` variables with raw RGB values. 2. The core `theme.css` now defines `--color-primary-*` and `--color-secondary-*` inside the `@theme` block using a `rgb(var(...))` function. This makes Tailwind aware of the themeable color names so it can generate all necessary utilities (`bg-`, `text-`, `ring-`, etc.) while ensuring the final color value is resolved in the browser at runtime. This change fixes the build error related to unknown utility classes (e.g., `ring-primary-500`) and ensures that the selected theme pack is correctly applied across all components.
Hugo Blox Tailwind UI
The Hugo Blox web framework utilizing Tailwind CSS v4 with Hugo's native integration for styling components with Tailwind v4.
Requirements
- Hugo v0.148.2+ (Extended Edition)
- Node.js v20+
- pnpm (see
packageManagerfield in package.json)
Quick Start
1. Install Dependencies
pnpm install
2. Run Development Server
hugo server
Tailwind CSS is processed automatically by Hugo using the css.TailwindCSS function.
Features
- Tailwind CSS v4: Latest version with improved performance over Tailwind v3
- Hugo Native Integration: Uses Hugo's built-in
css.TailwindCSSfunction - Dynamic CSS Generation: Only includes utilities actually used in your content for ultra-fast page loads
- No Pre-compilation: CSS is generated on-demand (previously Tailwind v3 was pre-compiled in Hugo Blox as
wc.min.css) - Community Components: Community components work seamlessly without manual compilation
Configuration
The Tailwind configuration is now in CSS format at assets/css/main.css using the @theme directive. The configuration includes:
- Hugo Blox color schemes (primary, secondary, neutral)
- Typography settings
- Safelist patterns for dynamic classes
- Dark mode support
Migration from Tailwind v3
If you're upgrading from Tailwind v3:
- Install the new dependencies:
pnpm install - Remove any
assets/dist/wc.min.cssfiles - Add the
package.jsonfile from the latest starter templates - Update your deployment scripts to install it with
pnpm install(refer to the latest.githubfolder in the starters) - The old
tailwind.config.jsandpostcss.config.jsfiles are no longer needed
Development
For module development:
# Install dependencies
pnpm install
# Run development server
hugo server --disableFastRender
# Build for production
hugo --minify