contrast - typescriptcss | typescriptcss

typescriptcssv0.1

☰Docs

Getting Started

Core Concepts

Dark mode Hover, focus, and other states Responsive design Styling with utility chains Theme

Layout

aspect-ratio columns break-after break-before break-inside box-decoration-break box-sizing display float clear isolation object-fit object-position overflow overscroll-behavior position top / right / bottom / left visibility z-index

Flexbox & Grid

flex-basis flex-direction flex-wrap flex flex-grow flex-shrink order grid-template-columns grid-column grid-template-rows grid-row grid-auto-flow grid-auto-columns grid-auto-rows gap justify-content justify-items justify-self align-content align-items align-self place-content place-items place-self

Spacing

Sizing

width min-width max-width height min-height max-height inline-size min-inline-size max-inline-size block-size min-block-size max-block-size

Typography

font-family font-size font-smoothing font-style font-weight font-stretch font-variant-numeric font-feature-settings letter-spacing line-clamp line-height list-style-image list-style-position list-style-type text-align color text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness text-underline-offset text-transform text-overflow text-wrap text-indent tab-size vertical-align white-space word-break overflow-wrap hyphens content

Backgrounds

background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size

Borders

border-radius border-width border-color border-style outline-width outline-color outline-style outline-offset

Effects

box-shadow text-shadow opacity mix-blend-mode background-blend-mode mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type

Filters

filter blur brightness contrast drop-shadow grayscale hue-rotate invert saturate sepia

Backdrop Filters

backdrop-filter blur brightness contrast grayscale hue-rotate invert opacity saturate sepia

Tables

border-collapse border-spacing table-layout caption-side

Transitions & Animation

transition-property transition-behavior transition-duration transition-timing-function transition-delay animation

Transforms

backface-visibility perspective perspective-origin rotate scale skew transform transform-origin transform-style translate zoom

Interactivity

accent-color appearance caret-color color-scheme cursor field-sizing pointer-events resize scroll-behavior scrollbar-color scrollbar-width scrollbar-gutter scroll-margin scroll-padding scroll-snap-align scroll-snap-stop scroll-snap-type touch-action user-select will-change

SVG

fill stroke stroke-width

Accessibility

forced-color-adjust

contrast

Utility	Styles
`backdrop.contrast[<value>]`	`backdrop-filter: contrast(<number>%);`

typescriptcssDocumentation Components Templates Playground

ResourcesInstallation Theme Responsive design Dark mode

CommunityGitHub Discussions Showcase Blog

Moreplugin-vite plugin-next plugin-rollup plugin-webpack

SystemLightDark

© 2026 typescriptcss