TSS Logo

Tea Simple Smart CSS

TSS · v1.0.4 · MIT

Lightweight, zero-config, utility-first CSS engine. Scans HTML at runtime, generates only used CSS, and handles dark mode automatically.

~10kb

Minified

0

Dependencies

Auto

Dark Mode

CDN

Ready

Runtime

Zero-build CSS generation based on your actual HTML usage.

Dark Mode

Tokens adapt automatically to system settings or manual toggle.

Observer

Watches for DOM changes to style dynamic elements instantly.

Utilities

Standard utility names. If you know Tailwind, you know TSS.

In Developmentv1.1.0 Roadmap

Responsive Support

Breakpoints (sm:, md:, lg:) are arriving soon.

Installation

Install via package manager or use the CDN.

1

CDN

Easiest

Drop the script in your <head>.

HTML
<!-- jsDelivr (recommended) -->
<script src="https://cdn.jsdelivr.net/npm/tea-simple-smart-css@1.0.4/dist/tss.min.js"></script>

<!-- or unpkg -->
<script src="https://unpkg.com/tea-simple-smart-css@1.0.4/dist/tss.min.js"></script>
2

npm / bun

Terminal
npm install tea-simple-smart-css
3

ES Module Import

JavaScript
import TSS from 'tea-simple-smart-css';

Quick Start

Minimal production-ready template.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/tea-simple-smart-css@1.0.4/dist/tss.min.js"></script>
</head>
<body class="bg-base text-body">
  <div class="max-w-xl mx-auto p-8">
    <h1 class="text-3xl font-bold text-heading mb-4">Hello TSS</h1>
    <p class="text-body mb-6">Auto light & dark mode.</p>
    <div class="bg-accent text-white p-4 rounded-xl">
      Styled with TSS utilities
    </div>
    <button onclick="TSS.toggleDark()"
      class="mt-4 bg-muted text-heading px-4 py-2 rounded-lg cursor-pointer border">
      Toggle Dark Mode
    </button>
  </div>
</body>
</html>
Live Preview (CodePen)
Open in CodePen

How It Works

Understanding TSS internals in three steps.

1

DOM Scan

TSS scans every element and generates required CSS at runtime.

element.classList → ["bg-accent", "p-4", "rounded-xl"] → generates CSS
2

Theming

TSS injects semantic tokens as CSS variables with dark mode support.

:root {
  --tss-accent: #4f46e5;
}
@media (prefers-color-scheme: dark) {
  --tss-accent: #818cf8;
}
3

Watch Changes

TSS watches for new elements to apply styles automatically.

document.body → observe(childList + subtree + attributes)

Class Explorer

Type any TSS class to instantly see the CSS it generates — powered by parse().

Enter a class above to see generated CSS ↑

Quick examples:

Semantic Colors

These tokens automatically switch between light and dark values. Use them with bg-{token}, text-{token}, and border-{token}.

TokenLightDarkPreviewUsage
primary#ffffff#09090b
Card backgrounds
secondary#f3f4f6#18181b
Sidebars, panels
tertiary#e5e7eb#27272a
Nested containers
surface#ffffff#18181b
Main surface
base#f9fafb#09090b
Page background
muted#f3f4f6#27272a
Subtle sections
inverse#111827#f9fafb
Inverted banners
heading#111827#f9fafb
Headings, titles
body#374151#d1d5db
Paragraph text
subtle#6b7280#9ca3af
Captions, hints
disabled#9ca3af#52525b
Disabled state
accent#4f46e5#818cf8
Primary actions
link#2563eb#60a5fa
Hyperlinks
success#16a34a#4ade80
Success states
warning#f59e0b#fbbf24
Warnings
danger#dc2626#f87171
Errors
info#2563eb#60a5fa
Informational
outline#e5e7eb#3f3f46
Border color
ring#3b82f6#60a5fa
Focus rings

Text Color Tokens

text-heading: titles

text-body: paragraph

text-subtle: secondary info

text-disabled: inactive

text-link: interactive

text-successtext-warningtext-dangertext-infotext-accent

Color Palette

Fixed color shades, identical in both light and dark mode. Syntax: bg-{color}-{shade} or text-{color}-{shade}.

slate

50100200300400500600700800900950

red

50100200300400500600700800900950

orange

50100200300400500600700800900950

amber

50100200300400500600700800900950

green

50100200300400500600700800900950

teal

50100200300400500600700800900950

blue

50100200300400500600700800900950

indigo

50100200300400500600700800900950

violet

50100200300400500600700800900950

pink

50100200300400500600700800900950

Gray · Zinc · Rose · Sky · Cyan · Lime · Yellow · Purple · Emerald

All families support shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

Typography

Font sizes, weights, alignment and text utilities.

Font Sizes

ClassSizeLine HeightPreview
text-xs0.75rem1remThe quick brown fox
text-sm0.875rem1.25remThe quick brown fox
text-base1rem1.5remThe quick brown fox
text-lg1.125rem1.75remThe quick brown fox
text-xl1.25rem1.75remThe quick brown fox
text-2xl1.5rem2remThe quick brown fox
text-3xl1.875rem2.25remThe quick brown fox
text-4xl2.25rem2.5remThe quick brown fox
text-5xl3rem1TSS

Font Weights

ClassWeightPreview
font-thin100Tea Simple Smart CSS
font-extralight200Tea Simple Smart CSS
font-light300Tea Simple Smart CSS
font-normal400Tea Simple Smart CSS
font-medium500Tea Simple Smart CSS
font-semibold600Tea Simple Smart CSS
font-bold700Tea Simple Smart CSS
font-extrabold800Tea Simple Smart CSS
font-black900Tea Simple Smart CSS

Text Utilities

Alignment

text-left

text-center

text-right

Transform

uppercase

LOWERCASE

capitalize me

Decoration

underline

overline

line-through

Misc

italic

truncate: long text trimmed with ellipsis.

Spacing

Consistent scale for padding and margin. Axis variants supported.

KeyValuePixels
000px
px1px1px
0.50.125rem2px
10.25rem4px
20.5rem8px
30.75rem12px
41rem16px
51.25rem20px
61.5rem24px
82rem32px
102.5rem40px
123rem48px
164rem64px
205rem80px
246rem96px
autoauto-

Padding Visual

p-1
p-2
p-3
p-4
p-6
p-8

Borders & Radius

Border widths, colors, and radius utilities.

Border Width

border
border-2
border-4
border-8

Border Sides

border-t-4
border-r-4
border-b-4
border-l-4

Border Colors

accent
success
danger
warning
blue-500
purple-500

Border Radius

none
sm
rounded
md
lg
xl
2xl
full

Layout & Flexbox

Display and flexbox utilities.

Flex Examples

flex justify-between items-center

Start
Center
End

flex gap-3

flex-1
flex-1
flex-1

flex flex-col gap-2

Item 1
Item 2
Item 3
ClassCSS
flex-row / flex-colflex-direction: row / column
flex-wrap / flex-nowrapflex-wrap: wrap / nowrap
flex-1flex: 1 1 0%
flex-noneflex: none
flex-grow / flex-shrink-0flex-grow: 1 / flex-shrink: 0
items-start/center/end/stretchalign-items: …
justify-start/center/end/between/around/evenlyjustify-content: …
self-start/center/end/stretchalign-self: …
gap-{n} / gap-x-{n} / gap-y-{n}gap / column-gap / row-gap: …

Grid

CSS Grid utilities for two-dimensional layouts.

grid grid-cols-3 gap-3

1
2
3

grid-cols-4 with col-span-2 and col-span-full

1
2
col-span-2
col-span-full
ClassCSS
grid-cols-{1-12}grid-template-columns: repeat(n, minmax(0, 1fr))
grid-rows-{1-6}grid-template-rows: repeat(n, minmax(0, 1fr))
col-span-{n}grid-column: span n / span n
col-span-fullgrid-column: 1 / -1
row-span-{n}grid-row: span n / span n
place-items-centerplace-items: center
place-content-centerplace-content: center

Sizing

Width, height, and min/max sizing utilities.

PrefixPropertyExamples
w-{n}widthw-4, w-8, w-16, w-full, w-auto
h-{n}heighth-4, h-8, h-screen, h-full
w-{a}/{b}width %w-1/2 (50%), w-1/3 (33%), w-3/4 (75%)
size-{n}width + heightsize-8 → w-8 h-8
max-w-{key}max-widthmax-w-sm, max-w-xl, max-w-7xl
min-w-{n}min-widthmin-w-0, min-w-full
min-h-{n}min-heightmin-h-0, min-h-screen
max-h-{n}max-heightmax-h-96, max-h-screen

max-w Scale

ClassValue
max-w-xs20rem (320px)
max-w-sm24rem (384px)
max-w-md28rem (448px)
max-w-lg32rem (512px)
max-w-xl36rem (576px)
max-w-2xl42rem (672px)
max-w-3xl48rem (768px)
max-w-4xl56rem (896px)
max-w-5xl64rem (1024px)
max-w-6xl72rem (1152px)
max-w-7xl80rem (1280px)

Positioning

Position utilities and inset helpers.

ClassCSS
static / relative / absolute / fixed / stickyposition: …
top-{n} / right-{n} / bottom-{n} / left-{n}top / right / bottom / left: …
inset-{n}top + right + bottom + left: …
inset-x-{n}left + right: …
inset-y-{n}top + bottom: …
z-{0|10|20|30|40|50|auto}z-index: …

Shadows

Box shadow utilities from subtle to dramatic.

shadow-sm
shadow
shadow-md
shadow-lg
shadow-xl
shadow-2xl

Transitions

Smooth state changes with zero boilerplate.

ClassProperties Transitioned
transitioncolor, bg, border, opacity, shadow, transform — 150ms ease
transition-allall — 150ms ease
transition-colorscolor, background-color, border-color — 150ms ease
transition-opacityopacity — 150ms ease
transition-shadowbox-shadow — 150ms ease
transition-transformtransform — 150ms ease
transition-nonenone (disabled)

Easing

ClassCubic Bezier
ease-linearlinear
ease-incubic-bezier(0.4, 0, 1, 1)
ease-outcubic-bezier(0, 0, 0.2, 1)
ease-in-outcubic-bezier(0.4, 0, 0.2, 1)

Effects & Shimmer

Premium animations for skeleton loaders and state indicators.

Pulse vs Shimmer

animate-pulse
bg-shimmer

Usage Example

Html

Utilities

Miscellaneous utility classes for common CSS patterns.

Opacity

opacity-00
opacity-250.25
opacity-500.5
opacity-750.75
opacity-1001

Overflow

overflow-hiddenhidden
overflow-autoauto
overflow-scrollscroll
overflow-visiblevisible
overflow-x-hiddenx: hidden
overflow-y-autoy: auto

Cursor

cursor-pointerpointer
cursor-defaultdefault
cursor-not-allowednot-allowed
cursor-waitwait
cursor-grabgrab
cursor-nonenone

Misc

truncateoverflow: hidden + ellipsis
outline-noneoutline: 2px solid transparent
italicfont-style: italic
antialiased-webkit-font-smoothing: antialiased
pointer-events-nonepointer-events: none
sr-onlyVisually hidden, screen-reader accessible

State Modifiers

Interactive states like hover can be applied using the hover: prefix.

Hover card example

class="bg-accent hover:bg-indigo-700 transition"

API Reference

TSS exposes a small JavaScript API on the global TSS object.

METHODTSS.toggleDark()

Toggles dark mode on the <html> element by adding/removing the dark class. Persists preference to localStorage.

Returns

boolean - true if dark mode is now active, false if light.

JavaScript
// Toggle dark mode
const isDark = TSS.toggleDark();
console.log(isDark); // true or false
METHODTSS.parse(className)

Parses a single TSS class name and returns its selector and CSS rules.

Returns

{ selector: string, rules: Record<string, string> } | null

JavaScript
TSS.parse('bg-accent');
// → { selector: ".bg-accent", rules: { "background-color": "var(--tss-accent)" } }

TSS.parse('unknown-class');
// → null
METHODTSS.refresh()

Re-scans document.body for TSS classes. Useful after manually injecting HTML that bypasses the MutationObserver.

JavaScript
TSS.refresh(); // re-scan and apply styles
PROPERTYTSS.version

The current version string of the loaded TSS library.

JavaScript
console.log(TSS.version);
// → "1.0.3"