tiny-boi-css

⚡ Tiny-Boi-CSS is just a fun project! Inspired by Tailwind, built for experimentation.

tiny-boi-css

A tiny, fun spinoff of Tailwind CSS.

Get Started

Getting Started

Add tiny-boi-css to your project immediately.

Installation

Install:


                            npm install tiny-boi-css

Usage

Include the CSS in your project:


                            <link rel="stylesheet" href="node_modules/tiny-boi-css/dist/output.css">

Then use the classes:


                        <div class="p-4 m-2 rounded-lg border-2"> Hello Tiny-Boi-CSS! </div>

Utility Classes

Core utilities

Spacing

Margin and padding utilities

m-2, m-4, m-6, m-8

- Margin

p-2, p-4, p-6, p-8

- Padding

mx-2, px-8

- Horizontal

my-2, py-8

- Vertical

Colors

Text and background colors

text-blue, text-red, text-green

bg-blue, bg-red, bg-green

text-gray-100 to text-gray-900

Layout

Flexbox and positioning

flex, flex-col, flex-row

justify-center, justify-between, justify-around

items-center, items-start, items-end

Typography

Text styling utilities

text-small, text-large, text-xl

font-bold, font-semibold

Examples

See tiny-boi-css in action

Button Component


                            <button class="p-2 bg-blue rounded-lg">Click me!</button>

Card Component

Card Title

Some quick example text to build on the card title.


                            <div class="bg-white border-[1px] border-gray-200 p-4 rounded-lg">
                            <p class="font-xl font-bold">Card Title</p>
                            <p class="text-gray-500 mt-4">Some quick example text to build on the card title.</p>
                        </div>