barun-tailwinder

v1.0.3

Published

12 hours ago

A CSS utility framework for modern web development

0High
0Medium
0Low

barun-tiwary

css utility tailwindcss framework

Barun Tailwinder CSS

A modern, lightweight utility-first CSS framework built with TypeScript. Use Tailwinder to build beautiful, responsive interfaces with a comprehensive set of pre-built utility classes.

Features ✨

✅ Utility-first CSS - Style directly in HTML with pre-built classes
✅ TypeScript Support - Full type safety with TypeScript declarations
✅ Universal - Works in Node.js, React, Vue, and vanilla JavaScript
✅ CDN Ready - Use via NPM, link tags, or CDN services
✅ No Build Step - Use the browser version without compilation
✅ Comprehensive Color Palette - 7 colors with 11 shades each
✅ Responsive Design - Flexbox, Grid, and spacing utilities
✅ Lightweight - Minimal bundle size (~25KB minified)

Installation

NPM / Yarn / PNPM

npm install barun-tailwinder
# or
yarn add barun-tailwinder
# or
pnpm add barun-tailwinder

CDN

<script src="https://cdn.jsdelivr.net/npm/barun-tailwinder@latest/dist/index.js"></script>

or use unpkg:

<script src="https://unpkg.com/barun-tailwinder@latest/dist/index.js"></script>

Quick Start

React / Node.js

import { initTailwinder } from 'barun-tailwinder';

function App() {
  useEffect(() => {
    initTailwinder({ root: document.getElementById('root') });
  }, []);

  return (
    <div class="chai-bg-blue-500 chai-text-white chai-p-8 chai-rounded-lg">
      <h1 class="chai-text-2xl chai-font-bold">Hello Tailwinder!</h1>
      <p class="chai-text-lg chai-mt-4">Build beautiful UIs with utility classes</p>
      <button class="chai-bg-white chai-text-blue-600 chai-py-2 chai-px-4 chai-rounded chai-mt-6">
        Click Me
      </button>
    </div>
  );
}

export default App;

Browser / CDN

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barun Tailwinder</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: system-ui, sans-serif; }
    </style>
</head>
<body>
    <div id="root">
        <div class="chai-bg-blue-500 chai-text-white chai-p-8 chai-text-center">
            <h1 class="chai-text-4xl chai-font-bold">Welcome!</h1>
            <p class="chai-text-lg chai-mt-4">Utility-first CSS Framework</p>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/barun-tailwinder@latest/dist/index.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const { initTailwinder } = window.Tailwinder;
            initTailwinder({ root: document.getElementById('root') });
        });
    </script>
</body>
</html>

How It Works

Barun Tailwinder automatically converts chai-* prefixed class names into inline CSS styles:

<!-- Input -->
<div class="chai-bg-red-500 chai-text-white chai-p-8 chai-rounded-lg">
  Styled Element
</div>

<!-- Output (applied as inline styles) -->
<div style="background-color: #ef4444; color: white; padding: 32rem; border-radius: 0.5rem;">
  Styled Element
</div>

All style application happens automatically when you call initTailwinder().

Available Utilities

Colors (Color Name + Optional Shade)

All colors with shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900

Background Colors:

<div class="chai-bg-red-500">Red Background</div>
<div class="chai-bg-blue-300">Light Blue Background</div>
<div class="chai-bg-green-700">Dark Green Background</div>

Text Colors:

<p class="chai-text-red-500">Red Text</p>
<p class="chai-text-gray-700">Dark Gray Text</p>

Color Names:

red - Red tones
orange - Orange tones
blue - Blue tones
green - Green tones
yellow - Yellow tones
purple - Purple tones
gray - Gray tones

Spacing

Padding - chai-p[x|y]-{value}

<div class="chai-p-8">All sides padding</div>
<div class="chai-px-4">Horizontal padding</div>
<div class="chai-py-12">Vertical padding</div>

Margin - chai-m[x|y]-{value}

<div class="chai-m-8">All sides margin</div>
<div class="chai-mx-4">Horizontal margin</div>
<div class="chai-my-12">Vertical margin</div>

Gap - chai-gap[x|y]-{value}

<div class="chai-flex chai-gap-4">Items with gap</div>
<div class="chai-gapx-8">Horizontal gap only</div>

Valid Spacing Values: 0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 44, 48, 52, 56, 60, 64, 68, 72, 76, 80, 84, 88, 92, 96

(Values 0-40 are multiples of 2, values 44-96 are multiples of 4)

Layout & Flexbox

Display:

<div class="chai-flex">Flex container</div>
<div class="chai-grid">Grid container</div>
<div class="chai-block">Block element</div>
<div class="chai-inline-block">Inline-block</div>
<div class="chai-hidden">Hidden element</div>

Flex Direction:

<div class="chai-flex chai-flex-row">Left to right</div>
<div class="chai-flex chai-flex-col">Top to bottom</div>
<div class="chai-flex chai-flex-row-reverse">Right to left</div>
<div class="chai-flex chai-flex-col-reverse">Bottom to top</div>

Justify Content:

<div class="chai-flex chai-justify-start">Align start</div>
<div class="chai-flex chai-justify-center">Center content</div>
<div class="chai-flex chai-justify-between">Distribute space</div>
<div class="chai-flex chai-justify-around">Space around</div>
<div class="chai-flex chai-justify-evenly">Equal space</div>

Align Items:

<div class="chai-flex chai-items-start">Align to start</div>
<div class="chai-flex chai-items-center">Center vertically</div>
<div class="chai-flex chai-items-stretch">Stretch to fit</div>

Typography

Font Sizes:

<p class="chai-text-xs">Extra small (0.75rem)</p>
<p class="chai-text-sm">Small (0.875rem)</p>
<p class="chai-text-base">Base (1rem)</p>
<p class="chai-text-lg">Large (1.125rem)</p>
<p class="chai-text-xl">Extra large (1.25rem)</p>
<p class="chai-text-2xl">2XL (1.5rem)</p>
<p class="chai-text-3xl">3XL (1.875rem)</p>
<p class="chai-text-4xl">4XL (2.25rem)</p>
<p class="chai-text-5xl">5XL (3rem)</p>
<p class="chai-text-6xl">6XL (3.75rem)</p>
<p class="chai-text-7xl">7XL (4.5rem)</p>
<p class="chai-text-8xl">8XL (6rem)</p>
<p class="chai-text-9xl">9XL (8rem)</p>

Font Weights:

<p class="chai-font-thin">Thin (100)</p>
<p class="chai-font-extralight">Extra Light (200)</p>
<p class="chai-font-light">Light (300)</p>
<p class="chai-font-normal">Normal (400)</p>
<p class="chai-font-medium">Medium (500)</p>
<p class="chai-font-semibold">Semibold (600)</p>
<p class="chai-font-bold">Bold (700)</p>
<p class="chai-font-extrabold">Extra Bold (800)</p>
<p class="chai-font-black">Black (900)</p>

Border Radius

<div class="chai-rounded-none">No radius</div>
<div class="chai-rounded-sm">Small radius (0.125rem)</div>
<div class="chai-rounded-base">Base radius (0.25rem)</div>
<div class="chai-rounded-md">Medium radius (0.375rem)</div>
<div class="chai-rounded-lg">Large radius (0.5rem)</div>
<div class="chai-rounded-xl">Extra large (0.75rem)</div>
<div class="chai-rounded-2xl">2XL (1rem)</div>
<div class="chai-rounded-3xl">3XL (1.5rem)</div>
<div class="chai-rounded-full">Full circle (9999px)</div>

Directional Border Radius:

<div class="chai-rounded-t-lg">Top corners only</div>
<div class="chai-rounded-b-lg">Bottom corners only</div>
<div class="chai-rounded-l-lg">Left corners only</div>
<div class="chai-rounded-r-lg">Right corners only</div>

Shadows

<div class="chai-shadow-sm">Small shadow</div>
<div class="chai-shadow-base">Base shadow</div>
<div class="chai-shadow-md">Medium shadow</div>
<div class="chai-shadow-lg">Large shadow</div>
<div class="chai-shadow-xl">Extra large shadow</div>
<div class="chai-shadow-2xl">2XL shadow</div>
<div class="chai-shadow-none">No shadow</div>

Opacity

<div class="chai-opacity-0">0% opacity</div>
<div class="chai-opacity-5">5% opacity</div>
<div class="chai-opacity-10">10% opacity</div>
<div class="chai-opacity-25">25% opacity</div>
<div class="chai-opacity-50">50% opacity</div>
<div class="chai-opacity-75">75% opacity</div>
<div class="chai-opacity-100">100% opacity</div>

Available: 0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100

Transitions & Animations

Transition Duration:

<button class="chai-transition chai-transition-75">75ms transition</button>
<button class="chai-transition chai-transition-100">100ms transition</button>
<button class="chai-transition chai-transition-200">200ms transition</button>
<button class="chai-transition chai-transition-300">300ms transition</button>

Available: 75, 100, 150, 200, 300, 500, 700, 1000

Transition Timing Functions:

<div class="chai-transition chai-ease-linear">Linear timing</div>
<div class="chai-transition chai-ease-in">Ease in</div>
<div class="chai-transition chai-ease-out">Ease out</div>
<div class="chai-transition chai-ease-in-out">Ease in-out</div>

Transforms

Scale:

<div class="chai-scale-50">50% scale</div>
<div class="chai-scale-75">75% scale</div>
<div class="chai-scale-100">100% scale (normal)</div>
<div class="chai-scale-125">125% scale</div>
<div class="chai-scale-150">150% scale</div>

Available: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150

Position & Overflow

Position:

<div class="chai-static">Static positioning</div>
<div class="chai-relative">Relative positioning</div>
<div class="chai-absolute">Absolute positioning</div>
<div class="chai-fixed">Fixed positioning</div>
<div class="chai-sticky">Sticky positioning</div>

Overflow:

<div class="chai-overflow-auto">Auto overflow</div>
<div class="chai-overflow-hidden">Hide overflow</div>
<div class="chai-overflow-visible">Show overflow</div>
<div class="chai-overflow-scroll">Always show scrollbar</div>
<div class="chai-overflowx-auto">Horizontal scroll</div>
<div class="chai-overflowy-auto">Vertical scroll</div>

API Reference

`initTailwinder(options)`

Initialize Barun Tailwinder and apply styles to all elements with Barun Tailwinder classes.

Parameters:

options (Object)
- root (HTMLElement, required) - The root element to scan for Barun Tailwinder classes

Example:

import { initTailwinder } from 'barun-tailwinder';

initTailwinder({ 
  root: document.getElementById('root') 
});

Validator

Barun Tailwinder expects classes with the chai- prefix.

<!-- Valid -->
<div class="chai-bg-red-500">Styled</div>

<!-- Invalid (no prefix) -->
<div class="bg-red-500">Not styled</div>

Examples

Complete Gym Landing Page

import { useEffect } from 'react';
import { initTailwinder } from 'barun-tailwinder';

export default function App() {
  useEffect(() => {
    initTailwinder({ root: document.getElementById('root') });
  }, []);

  return (
    <div>
      {/* Header */}
      <header class="chai-bg-red-600 chai-text-white chai-py-4 chai-px-8">
        <h1 class="chai-text-3xl chai-font-bold">FitZone Gym</h1>
      </header>

      {/* Hero */}
      <section class="chai-bg-gray-900 chai-text-white chai-py-20 chai-px-8">
        <h2 class="chai-text-5xl chai-font-black chai-mb-4">
          Transform Your Body
        </h2>
        <p class="chai-text-xl chai-text-gray-300 chai-mb-6">
          Join our community of fitness enthusiasts
        </p>
        <button class="chai-bg-red-600 chai-text-white chai-px-8 chai-py-3 chai-rounded-lg">
          Get Started
        </button>
      </section>

      {/* Feature Grid */}
      <section class="chai-py-16 chai-px-8">
        <div class="chai-flex chai-flex-col chai-gap-8">
          <div class="chai-bg-gray-50 chai-p-8 chai-rounded-lg">
            <h3 class="chai-text-2xl chai-font-bold chai-mb-2">
              Modern Equipment
            </h3>
            <p class="chai-text-gray-600">
              Latest machines and free weights
            </p>
          </div>
          <div class="chai-bg-gray-50 chai-p-8 chai-rounded-lg">
            <h3 class="chai-text-2xl chai-font-bold chai-mb-2">
              Expert Trainers
            </h3>
            <p class="chai-text-gray-600">
              Certified professionals ready to help
            </p>
          </div>
        </div>
      </section>
    </div>
  );
}

Card Component

<div class="chai-bg-white chai-rounded-lg chai-shadow-lg chai-p-8">
  <h3 class="chai-text-2xl chai-font-bold chai-text-gray-900 chai-mb-4">
    Premium Plan
  </h3>
  <p class="chai-text-gray-600 chai-mb-6">
    Get unlimited access to all features
  </p>
  <div class="chai-flex chai-gap-4">
    <span class="chai-text-4xl chai-font-black chai-text-red-600">
      $99
    </span>
    <span class="chai-text-gray-600 chai-text-lg">/month</span>
  </div>
  <button class="chai-bg-red-600 chai-text-white chai-py-2 chai-px-6 chai-rounded chai-mt-6 chai-w-full chai-font-bold">
    Get Premium
  </button>
</div>

Browser Support

Tailwinder works in all modern browsers:

Chrome/Edge 90+
Firefox 88+
Safari 14+
Mobile browsers (iOS Safari, Chrome Mobile)

Performance

Lightweight: ~25KB minified
Fast Parsing: Processes classes in milliseconds
No Runtime Overhead: CSS applied once at initialization
CDN Ready: Optimized for fast CDN delivery

Configuration

Barun Tailwinder works with zero configuration. Just import and initialize:

import { initTailwinder } from 'barun-tailwinder';

initTailwinder({ root: document.getElementById('app') });

TypeScript Support

Full TypeScript support with type definitions:

import { initTailwinder } from 'barun-tailwinder';

const element: HTMLElement | null = document.getElementById('root');

if (element) {
  initTailwinder({ root: element });
}

Common Patterns

Responsive Containers

<div class="chai-flex chai-flex-col chai-gap-8 chai-px-8 chai-py-16">
  <h1 class="chai-text-5xl chai-font-black">Heading</h1>
  <p class="chai-text-lg chai-text-gray-600">Content here</p>
</div>

Buttons

<!-- Primary Button -->
<button class="chai-bg-red-600 chai-text-white chai-py-2 chai-px-6 chai-rounded chai-font-bold chai-shadow-md chai-transition chai-ease-in-out">
  Primary
</button>

<!-- Secondary Button -->
<button class="chai-bg-gray-200 chai-text-gray-900 chai-py-2 chai-px-6 chai-rounded chai-font-bold">
  Secondary
</button>

Cards

<div class="chai-bg-white chai-rounded-lg chai-shadow-md chai-p-6">
  <h3 class="chai-text-xl chai-font-bold chai-text-gray-900 chai-mb-2">
    Card Title
  </h3>
  <p class="chai-text-gray-600">Card description</p>
</div>

Flexbox Layout

<div class="chai-flex chai-justify-between chai-items-center chai-gap-4">
  <div>Logo</div>
  <nav class="chai-flex chai-gap-8">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
  </nav>
</div>

Troubleshooting

Styles Not Applied?

Ensure classes start with chai- prefix
Call initTailwinder() after DOM is ready
Check browser console for errors
Verify elements are within the root element

CDN Not Working?

Check script tag is loaded correctly
Verify window.Tailwinder exists
Ensure initTailwinder is called after DOM load
Check network tab for failed requests

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

ISC

Changelog

v1.0.1

Added IIFE format for CDN support
Improved TypeScript definitions
Added comprehensive documentation

v1.0.0

Initial release
Color utilities (7 colors, 11 shades each)
Spacing utilities (padding, margin, gap)
Typography utilities (font-size, font-weight)
Layout utilities (flexbox, grid)
Effects utilities (shadows, opacity, transitions)
Border radius utilities

Support

For issues, suggestions, or questions:

Open an issue on GitHub
Check existing documentation
Contact the maintainers

Made with ❤️ for the web development community