TailBliss

TailBliss is a modern, opinionated Hugo starter theme designed for building fast and efficient static websites. It leverages a cutting-edge tech stack including Tailwind CSS 4.x for utility-first styling, Vite for lightning-fast development and optimized builds, and Alpine.js for lightweight interactivity. This theme is ideal for developers looking to create high-performance blogs, personal sites, or landing pages with a streamlined workflow.

Key Features:

• Tailwind CSS 4.x Integration: Utilizes the latest version of Tailwind CSS for highly customizable and efficient styling, with a CSS-first architecture using @theme and @custom-variant directives.
• Vite Integration: Benefits from Vite's rapid development server, hot module reloading for instant CSS updates, and optimized production builds with automatic cache busting through timestamped or content-hashed filenames.
• Alpine.js: Incorporates Alpine.js for minimal JavaScript, enabling dynamic UI components without the overhead of larger frameworks.
• Modern Color System: Employs OKLCH color space for all colors, ensuring better perceptual uniformity and enhanced contrast across light and dark modes.
• Improved Typography: Features custom prose styles, replacing @tailwindcss/typography for better performance and control, along with enhanced code highlighting and markdown table styling.
• Automatic Content Setup: An intelligent installation script automatically populates your new Hugo site with example content, including sample pages and blog posts, ensuring a quick start without overwriting existing files.
• Development Workflow: Offers a dev:watch mode for auto-rebuilding CSS on changes and a rebuild command for manual CSS updates, ensuring zero cache issues.
• Light/Dark Modes: Built-in support for responsive light and dark themes.

Quick Start (Recommended):

To get started with TailBliss as a Hugo theme:

hugo new site my-tailbliss-site
cd my-tailbliss-site
 
git submodule add https://github.com/nusserstudios/tailbliss.git themes/tailbliss
 
cp -r themes/tailbliss/exampleSite/* .
 
pnpm install # Automatically runs content setup
pnpm run dev:watch # Start developing with auto CSS rebuilding

TailBliss provides a robust foundation for developers seeking a modern, performant, and highly customizable static site experience.