mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-05 14:14:41 +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 (core)
The Hugo Blox web framework powered by 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 templates - Update your deployment scripts to install it with
pnpm install(refer to the latest.githubfolder in the templates) - 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
Vendor Libraries
The module includes several third-party vendor libraries that are distributed with the module. These are copied from node_modules to the assets/dist/lib directory during the build process.
To update the vendor libraries:
# Update vendor libraries to the latest versions and rebuild
pnpm vendor:update-and-build
# Just rebuild vendor libraries without updating versions
pnpm vendor:libs
The following libraries are included:
- mermaid (diagrams)
- plotly.js (interactive charts)
- katex (math rendering)
- markmap-autoloader (mind maps)
- alpinejs (interactivity)
- preact (interactive components)