Write styles as TypeScript, ship them as CSS.
typescriptcss lets you author Tailwind-like utilities as inline style chains. There is no CSS file to maintain and no class names to invent — the build step collects every chain, removes duplicates, and emits the stylesheet for you.
Getting Started
Core Concepts
Dark modeDesigning a light and dark version of your interface from a single chain.Hover, focus, and other statesStyling elements on hover, focus, active, and every other interactive state directly inside a chain.Responsive designBuilding adaptive interfaces by placing breakpoints directly inside a style chain.Styling with utility chainsBuilding complex components from a constrained set of single-purpose utilities, written as a chain.ThemeDefining your design system as a plain TypeScript object that flows straight into your chains.
Layout
aspect-ratioUtilities for controlling the aspect ratio of an element.columnsUtilities for controlling the number of columns within an element.break-afterUtilities for controlling how a column or page should break after an element.break-beforeUtilities for controlling how a column or page should break before an element.break-insideUtilities for controlling how a column or page should break within an element.box-decoration-breakUtilities for controlling how element fragments should be rendered across multiple lines, columns, or pages.box-sizingUtilities for controlling how the browser should calculate an element's total size.displayUtilities for controlling the display box type of an element.floatUtilities for controlling the wrapping of content around an element.clearUtilities for controlling the wrapping of content around an element.isolationUtilities for controlling whether an element should explicitly create a new stacking context.object-fitUtilities for controlling how a replaced element's content should be resized.object-positionUtilities for controlling how a replaced element's content should be positioned within its container.overflowUtilities for controlling how an element handles content that is too large for the container.overscroll-behaviorUtilities for controlling how the browser behaves when reaching the boundary of a scrolling area.positionUtilities for controlling how an element is positioned in the document.top / right / bottom / leftUtilities for controlling the placement of positioned elements.visibilityUtilities for controlling the visibility of an element.z-indexUtilities for controlling the stack order of an element.
Flexbox & Grid
flex-basisUtilities for controlling the initial size of flex items.flex-directionUtilities for controlling the direction of flex items.flex-wrapUtilities for controlling how flex items wrap.flexUtilities for controlling how flex items both grow and shrink.flex-growUtilities for controlling how flex items grow.flex-shrinkUtilities for controlling how flex items shrink.orderUtilities for controlling the order of flex and grid items.grid-template-columnsUtilities for specifying the columns in a grid layout.grid-columnUtilities for controlling how elements are sized and placed across grid columns.grid-template-rowsUtilities for specifying the rows in a grid layout.grid-rowUtilities for controlling how elements are sized and placed across grid rows.grid-auto-flowUtilities for controlling how elements in a grid are auto-placed.grid-auto-columnsUtilities for controlling the size of implicitly-created grid columns.grid-auto-rowsUtilities for controlling the size of implicitly-created grid rows.gapUtilities for controlling gutters between grid and flexbox items.justify-contentUtilities for controlling how flex and grid items are positioned along a container's main axis.justify-itemsUtilities for controlling how grid items are aligned along their inline axis.justify-selfUtilities for controlling how an individual grid item is aligned along its inline axis.align-contentUtilities for controlling how rows are positioned in multi-row flex and grid containers.align-itemsUtilities for controlling how flex and grid items are positioned along a container's cross axis.align-selfUtilities for controlling how an individual flex or grid item is positioned along its container's cross axis.place-contentUtilities for controlling how content is justified and aligned at the same time.place-itemsUtilities for controlling how items are justified and aligned at the same time.place-selfUtilities for controlling how an individual item is justified and aligned at the same time.
Spacing
Sizing
widthUtilities for setting the width of an element.min-widthUtilities for setting the minimum width of an element.max-widthUtilities for setting the maximum width of an element.heightUtilities for setting the height of an element.min-heightUtilities for setting the minimum height of an element.max-heightUtilities for setting the maximum height of an element.inline-sizeUtilities for setting the inline size of an element.min-inline-sizeUtilities for setting the minimum inline size of an element.max-inline-sizeUtilities for setting the maximum inline size of an element.block-sizeUtilities for setting the block size of an element.min-block-sizeUtilities for setting the minimum block size of an element.max-block-sizeUtilities for setting the maximum block size of an element.
Typography
font-familyUtilities for controlling the font family of an element.font-sizeUtilities for controlling the font size of an element.font-smoothingUtilities for controlling the font smoothing of an element.font-styleUtilities for controlling the style of text.font-weightUtilities for controlling the font weight of an element.font-stretchUtilities for selecting the width of a font face.font-variant-numericUtilities for controlling the variant of numbers.font-feature-settingsUtilities for controlling advanced typographic features.letter-spacingUtilities for controlling the tracking, or letter spacing, of an element.line-clampUtilities for clamping text to a specific number of lines.line-heightUtilities for controlling the leading, or line height, of an element.list-style-imageUtilities for controlling the marker images for list items.list-style-positionUtilities for controlling the position of bullets and numbers in lists.list-style-typeUtilities for controlling the marker style of a list.text-alignUtilities for controlling the alignment of text.colorUtilities for controlling the text color of an element.text-decoration-lineUtilities for controlling the decoration of text.text-decoration-colorUtilities for controlling the color of text decorations.text-decoration-styleUtilities for controlling the style of text decorations.text-decoration-thicknessUtilities for controlling the thickness of text decorations.text-underline-offsetUtilities for controlling the offset of a text underline.text-transformUtilities for controlling the capitalization of text.text-overflowUtilities for controlling how the text of an element overflows.text-wrapUtilities for controlling how text wraps within an element.text-indentUtilities for controlling the amount of empty space shown before text in a block.tab-sizeUtilities for controlling the size of tab characters.vertical-alignUtilities for controlling the vertical alignment of an inline or table-cell box.white-spaceUtilities for controlling an element's white-space property.word-breakUtilities for controlling word breaks in an element.overflow-wrapUtilities for controlling line breaks within words in an overflowing element.hyphensUtilities for controlling how words should be hyphenated.contentUtilities for controlling the content of the before and after pseudo-elements.
Backgrounds
background-attachmentUtilities for controlling how a background image behaves when scrolling.background-clipUtilities for controlling the bounding box of an element's background.background-colorUtilities for controlling an element's background color.background-imageUtilities for controlling an element's background image.background-originUtilities for controlling how an element's background is positioned relative to borders, padding, and content.background-positionUtilities for controlling the position of an element's background image.background-repeatUtilities for controlling the repetition of an element's background image.background-sizeUtilities for controlling the background size of an element's background image.
Borders
border-radiusUtilities for controlling the border radius of an element.border-widthUtilities for controlling the width of an element's borders.border-colorUtilities for controlling the color of an element's borders.border-styleUtilities for controlling the style of an element's borders.outline-widthUtilities for controlling the width of an element's outline.outline-colorUtilities for controlling the color of an element's outline.outline-styleUtilities for controlling the style of an element's outline.outline-offsetUtilities for controlling the offset of an element's outline.
Effects
box-shadowUtilities for controlling the box shadow of an element.text-shadowUtilities for controlling the shadow of a text element.opacityUtilities for controlling the opacity of an element.mix-blend-modeUtilities for controlling how an element should blend with the background.background-blend-modeUtilities for controlling how an element's background image should blend with its background color.mask-clipUtilities for controlling the bounding box of an element's mask.mask-compositeUtilities for controlling how multiple masks are combined together.mask-imageUtilities for controlling an element's mask image.mask-modeUtilities for controlling an element's mask mode.mask-originUtilities for controlling how an element's mask image is positioned relative to borders, padding, and content.mask-positionUtilities for controlling the position of an element's mask image.mask-repeatUtilities for controlling the repetition of an element's mask image.mask-sizeUtilities for controlling the size of an element's mask image.mask-typeUtilities for controlling how an SVG mask is interpreted.
Filters
filterUtilities for applying filters to an element.blurUtilities for applying blur filters to an element.brightnessUtilities for applying brightness filters to an element.contrastUtilities for applying contrast filters to an element.drop-shadowUtilities for applying drop-shadow filters to an element.grayscaleUtilities for applying grayscale filters to an element.hue-rotateUtilities for applying hue-rotate filters to an element.invertUtilities for applying invert filters to an element.saturateUtilities for applying saturation filters to an element.sepiaUtilities for applying sepia filters to an element.
Backdrop Filters
backdrop-filterUtilities for applying backdrop filters to an element.blurUtilities for applying backdrop blur filters to an element.brightnessUtilities for applying backdrop brightness filters to an element.contrastRead the guidegrayscaleUtilities for applying backdrop grayscale filters to an element.hue-rotateUtilities for applying backdrop hue-rotate filters to an element.invertUtilities for applying backdrop invert filters to an element.opacityUtilities for applying backdrop opacity filters to an element.saturateUtilities for applying backdrop saturation filters to an element.sepiaUtilities for applying backdrop sepia filters to an element.
Tables
Transitions & Animation
transition-propertyUtilities for controlling which CSS properties transition.transition-behaviorRead the guidetransition-durationUtilities for controlling the duration of CSS transitions.transition-timing-functionUtilities for controlling the easing of CSS transitions.transition-delayUtilities for controlling the delay of CSS transitions.animationUtilities for animating elements with CSS animations.
Transforms
backface-visibilityUtilities for controlling if an element's backface is visible.perspectiveUtilities for controlling an element's perspective when placed in 3D space.perspective-originUtilities for controlling an element's perspective origin when placed in 3D space.rotateUtilities for rotating elements.scaleUtilities for scaling elements.skewUtilities for skewing elements with transform.transformUtilities for transforming elements.transform-originUtilities for specifying the origin for an element's transformations.transform-styleUtilities for controlling if an elements children are placed in 3D space.translateUtilities for translating elements.zoomUtilities for scaling elements using zoom.
Interactivity
accent-colorUtilities for controlling the accented color of a form control.appearanceUtilities for suppressing native form control styling.caret-colorUtilities for controlling the color of the text input cursor.color-schemeUtilities for controlling the color scheme of an element.cursorUtilities for controlling the cursor style when hovering over an element.field-sizingUtilities for controlling the sizing of form controls.pointer-eventsUtilities for controlling whether an element responds to pointer events.resizeUtilities for controlling how an element can be resized.scroll-behaviorUtilities for controlling the scroll behavior of an element.scrollbar-colorUtilities for controlling the color of an element's scrollbar.scrollbar-widthUtilities for controlling the width of an element's scrollbar.scrollbar-gutterUtilities for controlling the gutter space reserved for an element's scrollbar.scroll-marginUtilities for controlling the scroll offset around items in a snap container.scroll-paddingUtilities for controlling an element's scroll offset within a snap container.scroll-snap-alignUtilities for controlling the scroll snap alignment of an element.scroll-snap-stopUtilities for controlling whether you can skip past possible snap positions.scroll-snap-typeUtilities for controlling how strictly snap points are enforced in a snap container.touch-actionUtilities for controlling how an element can be scrolled and zoomed on touchscreens.user-selectUtilities for controlling whether the user can select text in an element.will-changeUtilities for optimizing upcoming animations of elements that are expected to change.