Getting Started

Welcome to the Twigwind CSS Framework documentation. Twigwind is a utility-first CSS framework built with JavaScript for rapid prototyping and flexibility.

Installation

NPM Package

npm install twigwind

CDN package

Add Twigwind to your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/helloadhavan/twigwind/src/css.css">
<script src="https://cdn.jsdelivr.net/gh/helloadhavan/twigwind/src/css.js" type="module"></script>

Initialize Twigwind after DOM content loads:

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

Build System (Optional)

For optimized CSS generation:

node build.js

This will generate optimized CSS files in the dist/ directory.

Usage

Here’s a quick example:

<h1 class="color-blue size-xl mb-20">Hello Twigwind</h1>
<div class="flex:row-center-center bg-green p-10">
  <div class="bg-purple p-5 mr-10">Item 1</div>
  <div class="bg-red p-5">Item 2</div>
</div>

Utilities

Twigwind includes utility classes for:

• Colors — e.g. bg-blue, color-red
• Spacing — e.g. m-20, p-10
• Flex Layouts — e.g. flex:row-center-center
• Position — e.g. absolute, top-10, z-20
• Animations — e.g. animate-spin, animate-bounce
• Gradients — e.g. gradient-to-r-red-blue, gradient-45deg-purple-pink
• Backgrounds — e.g. clip-border, image-url-[URL]
• Hover states — e.g. hover:bg-purple

Examples

A section with hover effects:

<div class="flex:row-left-center">
  <div class="bg-cyan hover:bg-purple size-md mr-10 p-10">Hover Me</div>
  <div class="bg-lightBlue hover:bg-amber size-md p-10">Hover Me</div>
</div>

Framework Comparison