Style
CSS property surface — what Takumi supports, what's partial, what's silently ignored.
Takumi parses inline style, the tw Tailwind prop, and external stylesheets through one CSS engine. The table below lists every property the engine recognises, grouped by category. Anything not listed is parsed leniently (it won't throw) but has no effect on layout or rasterization.
Status legend: Supported behaves like a browser, Partial parses but only honours a subset of values, Unsupported is accepted by the parser for forward-compat but does nothing.
Box model
displaySupportedflex | inline-flex | grid | inline-grid | block | inline-block | inline | nonepositionPartialrelative | absolutestatic and fixed are treated as relative.
width / height / min-* / max-*Supportedpx, %, vw, vh, em, rem, autoaspect-ratioSupportedpadding / padding-*Supportedmargin / margin-*Supportedinset / top / right / bottom / leftSupportedbox-sizingSupportedoverflow / overflow-x / overflow-yPartialvisible | clip | hiddenscroll is treated as hidden.
visibilityPartialvisible | hiddenz-indexSupportedfloat / clearPartialBlock-level float layout — inline wrapping around floats is not implemented.
directionSupportedltr | rtlFlexbox
flex / flex-grow / flex-shrink / flex-basisSupportedflex-direction / flex-flowSupportedflex-wrapPartialnowrap | wrap | wrap-reversejustify-content / justify-items / justify-selfSupportedalign-content / align-items / align-selfSupportedplace-content / place-items / place-selfSupportedgap / row-gap / column-gapSupportedorderSupportedGrid
grid-template-columns / grid-template-rowsSupportedrepeat(3, 1fr) | 100px auto 1fr | [a] 1fr [b] 2frNamed lines, repeat(), and minmax() are supported.
grid-template-areasSupportedgrid-auto-columns / grid-auto-rows / grid-auto-flowSupportedgrid-column / grid-row / grid-areaSupportedspan 2 / auto | 1 / 3Typography
colorSupportedfont-familySupportedFallback chain resolved per-glyph across loaded fonts.
font-sizeSupportedfont-weight / font-style / font-stretchSupportedfont-variation-settingsSupportedVariable-font axis tuning.
font-feature-settingsSupportedfont-synthesis / font-synthesis-weight / font-synthesis-stylePartialnone | weight | style | autoline-heightSupportedletter-spacing / word-spacingSupportedtext-alignSupportedvertical-alignSupportedtext-overflowPartialellipsis | clip | <string>text-transformPartialnone | uppercase | lowercase | capitalizetext-shadowSupportedtext-decoration / text-decoration-line / -color / -thicknessPartialunderline | line-through | overlinetext-decoration-style only accepts solid.
text-decoration-skip-inkPartialauto | nonetext-wrap / text-wrap-mode / text-wrap-stylePartialwrap | nowrap | balance | prettywhite-space / white-space-collapsePartialnormal | pre | pre-wrap | pre-line | preserve | collapse | preserve-spaces | preserve-breaksword-breakPartialnormal | break-all | keep-all | break-wordoverflow-wrapSupportedline-clampSupported3 | 1 '…'Pass a number, or a number followed by a string literal to override the trailing ellipsis.
text-fitSupportedSee the css-text-4 spec — auto-resize text to fill a fixed-size container.
-webkit-text-stroke / -webkit-text-stroke-width / -color / -webkit-text-fill-colorSupportedstroke-linejoinPartialmiter | round | bevelBackground & color
background-colorSupportedbackground-imageSupportedurl() | linear-gradient() | radial-gradient() | conic-gradient() | repeating-*background-position / background-size / background-repeat / background-clipSupportedbackground-blend-modeSupportedopacitySupportedColor spaces
Modern CSS color syntax is supported across every color-accepting property:
rgb() / rgba() / hsl() / hsla()Supportedoklch() / oklab() / lch() / lab()SupportedPerceptually-uniform spaces; useful for gradient stops without grey banding.
color()Supportedcolor(display-p3 1 0 0) | color(rec2020 …)Wide-gamut colors are output 1:1 — what the consumer does with them depends on the format.
color-mix()Supportedcolor-mix(in oklch, red 40%, blue)Borders & outlines
border / border-* / border-width / -colorSupportedborder-stylePartialsolid | noneborder-radius / border-*-radiusSupportedoutline / outline-width / -color / -offsetSupportedoutline-stylePartialsolid | noneEffects
box-shadowSupportedComma-separated multi-shadow stacks supported. inset works.
filterSupportedblur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | saturate() | sepia() | opacity()backdrop-filterSupportedSame function set as filter; applied to content behind the element.
mix-blend-modeSupportedAll 16 standard modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity.
isolationSupportedimage-renderingPartialauto | smooth | pixelatedTransforms
transformPartialtranslate() | scale() | rotate() | skew() | matrix()2D only. 3D transforms and matrix3d() are accepted but flattened.
transform-originSupportedperspectiveUnsupportedParsed for forward-compat; has no effect since 3D transforms are flattened.
Clipping & masking
clip-pathSupportedinset() | circle() | ellipse() | polygon() | path()clip-ruleSupportedmask-image / mask-size / mask-position / mask-repeatSupportedobject-fit / object-positionSupportedAnimation
animation / animation-name / -duration / -delay / -iteration-count / -direction / -fill-mode / -play-stateSupportedBacked by @keyframes registered through stylesheets or the keyframes option.
animation-timing-functionPartiallinear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps() | cubic-bezier()Last updated on