tailwindcss-utilities v1.0.14

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/tailwindcss-utilities@1.0.14/dist/tailwind-utilities.min.css" rel="stylesheet" crossorigin />
<script src="https://unpkg.com/tailwindcss-utilities@1.0.14/dist/tailwind-utilities.min.js" defer ></script>

<!-- From jsDelivr -->
<link href="https://cdn.jsdelivr.net/npm/tailwindcss-utilities@1.0.14/dist/tailwind-utilities.min.css" rel="stylesheet" crossorigin crossorigin />
<script src="https://cdn.jsdelivr.net/npm/tailwindcss-utilities@1.0.14/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.14/files/dist/tailwindcss-utilities-min.css" rel="stylesheet" crossorigin  />
<script src="https://registry.npmmirror.com/tailwindcss-utilities/1.0.14/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