tailwindcss-utilities

v1.0.13

Published

12 days ago

A set of CSS Utility classes generated from tailwindcss. Suitable for plain HTML with CSS.

Downloads

855

0High
0Medium
0Low

fondoger

tailwindcss

Tailwindcss Utilities

A pure CSS static file which contains set of CSS Utility classes generated from TailwindCSS. It should be more performant than the JIT version TailwindCSS PlayCDN. Suitable for old-style plain HTML developers.

If you're looking for a full functional version, please refer to the Official PlayCDN or jsDelivr/UNPKG/Npmirror CDN, which is an in-browser JIT compiler.

Live Preview: TailwindCSS Viewer

Usage

<!-- From UNPKG -->
<link href="https://unpkg.com/[email protected]/dist/tailwind-utilities.min.css" rel="stylesheet" crossorigin />
<script src="https://unpkg.com/[email protected]/dist/tailwind-utilities.min.js" defer ></script>

<!-- From jsDelivr -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind-utilities.min.css" rel="stylesheet" crossorigin crossorigin />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind-utilities.min.js" defer></script>

<!-- From Taobao npmmirror (option 3, for China users) -->
<link href="https://registry.npmmirror.com/tailwindcss-utilities/1.0.13/files/dist/tailwindcss-utilities-min.css" rel="stylesheet" crossorigin  />
<script src="https://registry.npmmirror.com/tailwindcss-utilities/1.0.13/files/dist/tailwindcss-utilities-min.js" defer ></script>

NOTE: If you don't need dark mode and Hover/Focus/Active pseudo classes, you can remove the <script> tag. And crossorigin of link tag must be added if you add the JS script.

Part 0: Limitations

Color Palette: Only ['gray', 'red', 'green', 'amber', 'sky'] are supported
Arbitrary values not supported. (eg: w-[100px])
Most numeric CSS values are not supported. (eg: w-0.5)
Responsive Design not supported

Part 1: Layout

Aspect ratio

.aspect-auto, .aspect-square, .aspect-video

Container
```
.container
```

Columns

.columns-auto, .columns-1, .columns-2, .columns-3, ...

Break After

.break-after-avoid, .break-after-column, .break-after-page, ...

Break Before

.break-before-avoid, .break-before-column, .break-before-page, ...

Break Inside

.break-inside-avoid, .break-inside-column, .break-inside-page, ...

Box Decoration Break

.decoration-break-slice, .decoration-break-clone

Box Sizing
```
.sizing-border-box, .sizing-contet-box
```

Display

.hidden, .block, .inline, .inline-block, .flex, .table, .grid, ...

Floats

.float-none, .float-left, .left-end, ...

Clear

.clear-start, .clear-left, .clear-end, ...

Isolation
```
.isolate, .isolation-auto
```

Object Fit

.object-fill, .object-contain, .object-cover, ...

Object Position
```
.object-left, .object-right-bottom, ...
```

Overflow

.overflow-hidden, .overflow-x-scroll, .overflow-y-visible, ...

Overscroll Behavior

.overscroll-auto, .overscroll-x-none, .overscroll-y-contain, ...

Position

.static, .fixed, .absolute, .relative, .sticky

Position Top, Right, Bottom, Left: (Only ['0', '1', '2', '4', '8', '16', '32'] are supported)

.top-0, .top-1, .top-2, .top-4, .top-8, .top-16, .top-32
.right-0, .bottom-0, .left-0, .inset-0

Visibility
```
.visible, .invisible, .collapse
```
Z Index
```
.z-0, .z-10, .z-20, ..., .z-50, .z-auto
```

Part 2: Flexbox & Grid

Flex Basis

NUMERIC CSS NOT AVAILABLE (eg: basis-0, ...)

Flex Direction

.flex-row, .flex-row-reverse, .flex-col, .flex-col-reverse

Flex Wrap

.flex-wrap, .flex-wrap-reverse, .flex-nowrap

Flex

.flex-1, .flex-auto, .flex-initial, .flext-none

Flex Grow
```
.grow, .grow-0
```
Flex Shrink
```
.shrink, .shrink-0
```

Flex Order: NOT SUPPORTED!

NUMERIC CSS NOT AVAILABLE (eg: .order-1, .order-first)

Grid Template Columns

.grid-cols-1, .grid-cols-2, .grid-cols-3, ..., .grid-cols-12, ...

Grid Column Span

.col-auto, .col-span-full, .col-span-1, .col-span-2, ..., .col-span-12

Grid Template Rows

.grid-rows-1, .grid-rows-2, .grid-rows-3, ..., .grid-rows-12, ...

Grid Row Span

.row-auto, .row-span-full, .row-span-1, .row-span-2, ..., .row-span-12

Grid Auto Flow
```
.grid-flow-row, .grid-flow-col, ...
```

Grid Auto Columns

.auto-cols-auto, .auto-cols-min, .auto-cols-max, .auto-cols-fr

Grid Auto Rows

.auto-rows-auto, .auto-rows-min, .auto-rows-max, .auto-rows-fr

Gap: (Only ['0', 'px', '1', '2', '4', '8', '16', '32'] are supported)
```
.gap-0, .gap-px, .gap-1, .gap-2, .gap-4, .gap-8, .gap-16, .gap-32
```

Justify Content

.justify-center, .justify-start, .justify-evenly, ...

Justify Items

.justify-items-start, .justify-items-center, ...

Justify Self

.justify-self-start, .justify-self-center, ...

Align Content

.content-start, .content-center, .content-evenly, ...

Align Items
```
.items-start, .items-center, ...
```
Align Self
```
.self-start, .self-center, ...
```

Place Content

.place-content-start, .place-content-center, ...

Place Items

.place-items-start, .place-items-center, ...

Place Self

.place-self-start, .place-self-center, ...

Part 3: Spacing

Margin & Padding: (Only ['0', 'px', '1', '2', '4', '8', '16', '32'] are supported)

.p-0, .p-1, .p-2, .p-4, .p-8, .p-16, .p-32, .p-px,
.pl-0, .pt-0, .pr-0, .pb-0, .px-0, .py-0, .ps-0, .pe-0, ...

Space Between: (Only ['0', 'px', '1', '2', '4', '8', '16', '32'] are supported)
```
.space-x-2, .space-y-2
```
Width(+min/max): Only ['0', 'px', 'full', 'screen', 'auto', 'min', 'max', 'fit'] are supported
```
.w-0, .w-full, .w-min, ...
```
Height(+min/max): Only ['0', 'px', 'full', 'screen', 'auto', 'min', 'max', 'fit'] are supported
```
.h-0, .h-full, h-min, ...
```
Size(+min/max): Only ['0', 'px', 'full', 'screen', 'auto', 'min', 'max', 'fit'] are supported
```
.size-0, .size-min, ...
```

Part 4: Typography

Font Family
```
.font-sans, .font-serif, .font-mono
```

Font Size

.text-xs, .text-sm, .text-base, .text-lg, .text-xl, .text-2xl, ..., .text-9xl

Font Smoothing:
```
.antialiased, .subpixel-antialiased
```
Font Style
```
.italic, .not-italic
```

Font Weight

.font-light, .font-normal, .font-medium, .font-semibold, .font-bold, ...

Font Variant Numeric:

.normal-nums, .ordinal, .slashing-zero, ...

Letter Spacing

 .tracking-tight, .tracking-normal, .tracking-wide, ...

Line Clamping:

.line-clamp-1, .line-clamp-2, .line-clamp-3, ...

Line Height:

.leading-tight, .leading-snug, .leading-normal, .leading-relaxed, ...

List Style Image: NOT SUPPORTED!
```
ARBITRARY VALUES NOT SUPPORTED.
```
List Style Position:
```
.list-inside, .list-outside
```
List Style Type
```
.list-dist, .list-decimal, .list-none
```

Text Align

.text-left, .text-start, .text-center, .text-justify, ...

Text Color:

.text-white, .text-black, .text-gray-100, .text-red-200, ...

Text Decoration

.underline, .no-underline, .line-through, ...

Text Decoration Color

.decoration-black, .decoration-gray-100, ...

Text Decoration Style

.docoration-solid, .decoration-dotted, ...

Text Decoration Thickness
```
.decoration-1, .decoration-2, ...
```

Text Underline Offset

.underline-offset-1, .underline-offset-2, ...

Text Transform
```
.uppercase, .capitalize, ...
```
Text Overflow
```
.truncate, .text-ellipsis, ...
```

Text Wrap

.text-wrap, .text-nowrap, .text-balance, ...

Text Indent: NOT SUPPORTED!
```
NUMERIC CSS NOT SUPPORTED
```

Text Align

.align-middle, .align-top, .align-text-top, ...

Whitespace

.whitespace-nowrap, .whitespace-pre, ...

Word Break

.break-words, .break-all, .break-keep, ...

Hyphens
```
.hyphens-manual, .hyphens-auto, ...
```
Before/After Content:
```
ARBITRARY VALUES NOT SUPPORTED
```

Part 5: Backgrounds

Background Color

.bg-white, .bg-red-50, .bg-transparent, ...

Other Background Properties: NOT SUPPORTED!
```
NOT SUPPORTED
```

Part 6: Borders

Border Radius

.rounded, .rounded-sm, .rounded-md, .rounded-lg, ...

Border Width: Only .border is supported
```
.border 
```
Border Color
```
.border-black, .border-gray-50, ...
```
Border Style
```
.border-solid, .border-dashed, ...
```
Divide (Only .divide-x and .divide-y are supported)
```
.divide-x, .divide-y
```
Outline:
```
NOT SUPPORTED
```
Ring:
```
NOT SUPPORTED
```

Part 7: Effects

Box Shadow (Color not supported)

.shadow, .shadow-md, .shadow-lg, .shadow-inner, ...

Opacity

.opacity-0, .opacity-5, .opacity-10, ..., .opacity-95, .opacity-100

Mix Blend Mode: NOT SUPPORTED!
```
NOT SUPPORTED
```
Background Blend Mode: NOT SUPPORTED!
```
NOT SUPPORTED
```

Part 8: Filters

Blur

.blur, .blue-sm, .blur-md, .blur-lg, ...

Drop Shadow

.drop-shadow, .drop-shadow-sm, .drop-shadow-md, ...

Grayscale
```
.grayscale, .grayscale-0
```

Backdrop Blur

.backdrop-blur, .backdrop-blur-sm, .backdrop-blur-md, ...

Other Filters: NOT SUPPORTED!
```
NOT SUPPORTED!
```

Part 9: Tables

Table Border Collapse
```
.border-collapse, .border-seperate, ...
```
Table Border Spacing: NOT SUPPORTED!
```
NOT SUPPORTED
```
Table Layout
```
.table-auto, .table-fixed
```
Table Caption Side
```
.caption-top, .caption-bottom
```

Part 10: Transition/Animation

Animation:

.animate-spin, .animate-ping, .animate-pulse, ...

Other Transitions: NOT SUPPORTED!
```
NOT SUPPORTED
```

Part 11: Transforms

All Transforms: NOT SUPPORTED!
```
NOT SUPPORTED
```

Part 12: Interactivity

Accent Color

.accent-blue-500, .accent-green-500, ...

Appearance
```
.appearance-none, .appearance-auto
```
Cursor (Only ['auto', 'default', 'pointer', 'wait', 'text'] are supported)
```
.auto, .default, .pointer, .wait, .text
```
Caret Color: NOT SUPPORTED!
```
NOT SUPPORTED
```

Pointer Events

.pointer-events-none, .pointer-events-auto, ...

Resize

.resize, .resize-x, .resize-y, .resize-none

All Other Interactivity: NOT SUPPORTED!
```
NOT SUPPORTED
```

Part 13: SVG

All SVG: NOT SUPPORTED!
```
NOT SUPPORTED
```

Part 14: Accessibility

All Accessibility: NOT SUPPORTED!
```
NOT SUPPORTED
```

Part 15: Plugins

All Plugins: NOT SUPPORTED!
```
NOT SUPPORTED
```