Installation

NPM Package (Recommended)

Install Twigwind via NPM for the latest version and easy updates:

npm install twigwind

GitHub Repository

Clone the repository for development or manual installation:

git clone https://github.com/helloadhavan/twigwind.git

Project Structure

After installation, you'll have access to these key files:

• src/css.js: Main JavaScript framework file (ES6 module)
• src/css.css: Base styles and animations
• build.cjs: Build system for CSS optimization
• cli.cjs: Command-line interface for build tasks
• package.json: NPM package configuration
• version.txt: Current version (3.2.0)
• README.md: Comprehensive documentation

CDN Usage

Include Twigwind in your HTML for runtime CSS generation:

<!-- Base styles (optional) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.css">

<!-- Twigwind JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.js"></script>

Initialize Twigwind after DOM content loads:

document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("[class]").forEach(el => Twigwind.twApply(el));
  Twigwind.twInject();
});

Build System (Optional)

For optimized production builds, use the build system:

# Run build system with file watching
twigwind build --watch

The build system will:

• Scan all HTML files for Twigwind classes
• Generate optimized CSS containing only used utilities
• Output CSS files to the dist/ directory
• Watch for changes and rebuild automatically