Meta tags:
description= Utilities for translating elements.;
Headings (most frequently used words):
the, on, tailwind, using, translating, axis, spacing, css, resources, plus, community, translate, examples, getting, started, core, concepts, base, styles, layout, flexbox, grid, sizing, typography, backgrounds, borders, effects, filters, tables, transitions, animation, transforms, interactivity, svg, accessibility, scale, percentage, custom, value, responsive, design, this, page,
Text of the page (most frequently used words):
#translate (172), var (49), img (36), number (23), the (22), class (20), mountains (18), jpg (18), src (18), calc (18), fraction (17), #spacing (16), 100 (16), custom (15), value (13), property (12), size (11), text (11), 1px (10), color (10), axis (9), style (9), rotate (9), mask (9), background (9), and (8), font (8), grid (8), using (7), translating (7), transform (7), use (7), utilities (7), element (7), full (7), width (7), tailwind (6), like (6), scroll (6), align (6), border (6), flex (6), transition (5), position (5), break (5), decoration (5), documentation (4), css (4), scale (4), utility (4), for (4), transforms (4), origin (4), mode (4), outline (4), content (4), height (4), max (4), min (4), community (3), kit (3), templates (3), plus (3), showcase (3), blog (3), playground (3), responsive (3), design (3), percentage (3), styles (3), snap (3), type (3), scrollbar (3), behavior (3), sizing (3), shadow (3), image (3), box (3), overflow (3), wrap (3), line (3), list (3), block (3), inline (3), place (3), self (3), items (3), justify (3), auto (3), columns (3), discord (2), github (2), hero (2), patterns (2), heroicons (2), headless (2), refactoring (2), resources (2), blocks (2), sponsor (2), examples (2), this (2), zoom (2), more (2), variants (2), with (2), variant (2), that (2), function (2), you (2), variables (2), syntax (2), based (2), div (2), both (2), axes (2), none (2), stroke (2), padding (2), margin (2), perspective (2), visibility (2), animation (2), layout (2), sepia (2), saturate (2), opacity (2), invert (2), hue (2), grayscale (2), contrast (2), brightness (2), blur (2), filter (2), repeat (2), clip (2), blend (2), offset (2), rows (2), template (2), object (2), classes (2), trademark, policy, copyright, 2026, labs, inc, quick, reference, page, learn, about, prefix, breakpoint, only, apply, medium, screen, sizes, above, just, shorthand, adds, automatically, can, also, 142rad, set, translation, completely, note, require, applied, parent, show, elements, forced, adjust, accessibility, fill, svg, will, change, user, select, touch, action, stop, gutter, resize, pointer, events, field, cursor, scheme, caret, appearance, accent, interactivity, skew, backface, delay, timing, duration, transitions, caption, side, table, collapse, tables, backdrop, drop, filters, composite, mix, effects, radius, borders, attachment, backgrounds, hyphens, word, white, space, vertical, tab, indent, underline, thickness, clamp, letter, feature, settings, numeric, stretch, weight, smoothing, family, typography, gap, flow, row, column, order, shrink, grow, direction, basis, flexbox, index, top, right, bottom, left, overscroll, fit, isolation, clear, float, display, inside, before, after, aspect, ratio, preflight, base, functions, directives, detecting, source, files, adding, colors, theme, dark, hover, focus, other, states, styling, core, concepts, upgrade, guide, compatibility, editor, setup, installation, getting, started, new, course, components, partners, docs, ctrl,
Text of the page (random words):
translate transforms tailwind css v 4 3 k ctrl k docs blog showcase partners plus transforms translate documentation components templates ui kit playground course new community getting started installation editor setup compatibility upgrade guide core concepts styling with utility classes hover focus and other states responsive design dark mode theme variables colors adding custom styles detecting classes in source files functions and directives base styles preflight 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 padding margin 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 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 transforms translate utilities for translating elements class styles translate number translate calc var spacing number calc var spacing number translate number translate calc var spacing number calc var spacing number translate fraction translate calc fraction 100 calc fraction 100 translate fraction translate calc fraction 100 calc fraction 100 translate full translate 100 100 translate full translate 100 100 translate px translate 1px 1px translate px translate 1px 1px translate custom property translate var custom property var custom property translate value translate value value translate x number translate calc var spacing number var tw translate y translate x number translate calc var spacing number var tw translate y translate x fraction translate calc fraction 100 var tw translate y translate x fraction translate calc fraction 100 var tw translate y translate x full translate 100 var tw translate y translate x full translate 100 var tw translate y translate x px translate 1px var tw translate y translate x px translate 1px var tw translate y translate x custom property translate var custom property var tw translate y translate x value translate value var tw translate y translate y number translate var tw translate x calc var spacing number translate y number translate var tw translate x calc var spacing number translate y fraction translate var tw translate x calc fraction 100 translate y fraction translate var tw translate x calc fraction 100 translate y full translate var tw translate x 100 translate y full translate var tw translate x 100 translate y px translate var tw translate x 1px translate y px translate var tw translate x 1px translate y custom property translate var tw translate x var custom property translate y value translate var tw translate x value translate z number translate var tw translate x var tw translate y calc var spacing number translate z number translate var tw translate x var tw translate y calc var spacing number translate z px translate var tw translate x var tw translate y 1px translate z px translate var tw translate x var tw translate y 1px translate z custom property translate var tw translate x var tw translate y var custom property translate z value translate var tw translate x var tw translate y value translate none translate none show more examples using the spacing scale use translate number utilities like translate 2 and translate 4 to translate an element on both axes based on the spacing scale translate 6 translate 2 translate 8 img class translate 6 src img mountains jpg img class translate 2 src img mountains jpg img class translate 8 src img mountains jpg using a percentage use translate fraction utilities like translate 1 4 and translate full to translate an element on both axes by a percentage of the element s size translate 1 4 translate 1 6 translate 1 2 img class translate 1 4 src img mountains jpg img class translate 1 6 src img mountains jpg img class translate 1 2 src img mountains jpg translating on the x axis use translate x number or translate x fraction utilities like translate x 4 and translate x 1 4 to translate an element on the x axis translate x 4 translate x 2 translate x 1 2 img class translate x 4 src img mountains jpg img class translate x 2 src img mountains jpg img class translate x 1 2 src img mountains jpg translating on the y axis use translate y number or translate y fraction utilities like translate y 6 and translate y 1 3 to translate an element on the y axis translate y 4 translate y 2 translate y 1 2 img class translate y 4 src img mountains jpg img class translate y 2 src img mountains jpg img class translate y 1 2 src img mountains jpg translating on the z axis use translate z number utilities like translate z 6 and translate z 12 to translate an element on the z axis translate z 8 translate z 4 translate z 12 div class transform 3d img class translate z 8 rotate x 50 rotate z 45 src img mountains jpg img class translate z 2 rotate x 50 rotate z 45 src img mountains jpg img class translate z 1 2 rotate x 50 rotate z 45 src img mountains jpg div note that the translate z number utilities require the transform 3d utility to be applied to the parent element using a custom value use the translate value syntax to set the translation based on a completely custom value img class translate 3 142rad src img mountains jpg for css variables you can also use the translate custom property syntax img class translate my translate src img mountains jpg this is just a shorthand for translate var custom property that adds the var function for you automatically responsive design prefix a translate utility with a breakpoint variant like md to only apply the utility at medium screen sizes and above img class translate 45 md translate 60 src img mountains jpg learn more about using variants in the variants documentation transform style zoom on this page quick reference examples using the spacing scale using a percentage translating on the x axis translating on the y axis translating on the z axis using a custom value responsive design tailwind css documentation playground blog showcase sponsor resources refactoring ui headless ui heroicons hero patterns tailwind plus ui blocks templates ui kit community github discord x tailwind css documentation playground blog showcase sponsor tailwind plus ui blocks templates ui kit resources refactoring ui headless ui heroicons hero patterns community github discord x copyright 2026 tailwind labs inc trademark policy
|
