Getting Started

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

Why Twigwind?

Unlike tailwind or other CSS frameworks, Twigwind is designed to be highly customizable and extendable.
Twigwind achieves this through its unique CSS compiler that compiles classes into a single stylesheet.

Installation

NPM Package

npm install twigwind

CDN package

Add Twigwind to your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.css">
<script src="https://cdn.jsdelivr.net/npm/twigwind@latest/src/css.min.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