mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-10 06:15:36 +00:00
George Cushen
d7a8fbb415
The previous section_break implementation used CSS mask-image, which incidentally established a stacking context on the section. Replacing it with a gradient overlay div removed that side-effect — and broke the visual depth on every section with a gradient mesh or radial background. Without a stacking context, the section's negative-z-index descendants (home-section-bg at z:-1 carrying the radial gradient, and the gradient_mesh wrapper at z:-10 carrying the orbs) escaped the section and painted behind the page root, where they were occluded by the page body — flat dark hero, no glow, no orbs. Add `isolate` (isolation: isolate) to the section element. This is the no-visual-side-effect way to force a stacking context, restoring containment of the negative-z layers without affecting siblings or content.
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)