line-clamp utility class syntax
The line-clamp-{n} utility class automatically truncates text to n lines with a trailing ellipsis. For example, line-clamp-3 will truncate text to exactly 3 lines.
Tailwind CSS v4 · all subjects
utility classes in v4
35 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
v3.1 border-spacing utilities
Tailwind CSS v3.1 adds utilities for the border-spacing CSS property to control the space between table borders when using separate borders. Example: border-spacing-2 class can be used on tables with border-separate.
v3.1 backdrop pseudo-element styling for dialog
Tailwind CSS v3.1 adds a backdrop modifier to style the ::backdrop pseudo-element of the HTML <dialog> element. Example: backdrop:bg-slate-900/50 on a dialog element styles the backdrop when the dialog is open.
Hyphens utilities in v3.3
Tailwind CSS v3.3 added new hyphens-* utilities for controlling hyphenation behavior. Using hyphens-manual combined with the HTML ­ entity allows you to specify exactly where the browser should insert a hyphen when breaking a word across multiple lines.
New 950 color shade added to all colors in v3.3
Tailwind CSS v3.3 added a new 950 shade for every single color in the palette. In the grays, the 950 shade acts as a tinted black, useful for ultra dark UIs. In the rest of the color spectrum, the 950 shade was optimized for high contrast text and tinted control backgrounds.
Logical properties utilities added in v3.3
Tailwind CSS v3.3 added logical property utilities that adapt automatically to LTR and RTL text directions. These utilities use CSS logical properties like inset-inline-start, margin-inline-start, padding-inline-start, and border-*-start-radius. They replace the need for writing ltr: and rtl: variants for directional styling. The new utilities include: start-*, end-*, ms-*, me-*, ps-*, pe-*, rounded-s-*, rounded-e-*, rounded-ss-*, rounded-se-*, rounded-ee-*, rounded-es-*, border-s-*, border-e-*, scroll-ms-*, scroll-me-*, scroll-ps-*, and scroll-pe-*.
Hyphens example in v3.3
```html <p class="hyphens-manual ..."> Officially recognized by the Duden dictionary as the longest word in German, <span class="font-medium text-slate-900" lang="de">Kraftfahrzeug­haftpflichtversicherung</span> is a 36 letter word for motor vehicle liability insurance. </p> ```
Logical properties mapping table v3.3
| New class | CSS Property | Physical counterpart (LTR) | |-----------|--------------|----------------------------| | start-* | inset-inline-start | left-* | | end-* | inset-inline-end | right-* | | ms-* | margin-inline-start | ml-* | | me-* | margin-inline-end | mr-* | | ps-* | padding-inline-start | pl-* | | pe-* | padding-inline-end | pr-* | | rounded-s-* | border-start-start-radius, border-end-start-radius | rounded-l-* | | rounded-e-* | border-start-end-radius, border-end-end-radius | rounded-r-* | | rounded-ss-* | border-start-start-radius | rounded-tl-* | | rounded-se-* | border-start-end-radius | rounded-tr-* | | rounded-ee-* | border-end-end-radius | rounded-br-* | | rounded-es-* | border-end-start-radius | rounded-bl-* | | border-s-* | border-inline-start-width, border-inline-start-color | border-l-* | | border-e-* | border-inline-end-width, border-inline-end-color | border-r-* | | scroll-ms-* | scroll-margin-inline-start | scroll-ml-* | | scroll-me-* | scroll-margin-inline-end | scroll-mr-* | | scroll-ps-* | scroll-padding-inline-start | scroll-pl-* | | scroll-pe-* | scroll-padding-inline-end | scroll-pr-* |
Gradient color stop position utilities in v3.3
Tailwind CSS v3.3 added utilities like from-5%, via-35%, and to-85% that allow you to adjust the actual position of each color stop in gradients. The framework includes every value from 0% to 100% in steps of 5 out of the box. Arbitrary values can be used for exact percentages like from-[21.56%].
Line-clamp baked into v3.3
Tailwind CSS v3.3 baked the line-clamp utility directly into the framework instead of requiring a plugin. The utility uses deprecated -webkit-* properties but works in every browser. If upgrading from an earlier version where the @tailwindcss/line-clamp plugin was installed, the plugin can be safely removed from the plugins array in tailwind.config.js.
Line-clamp example in v3.3
```html <p class="line-clamp-3 text-sm/6 text-gray-600"> Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim. </p> ```
Font-size with line-height shorthand in v3.3
Tailwind CSS v3.3 allows setting font-size and line-height together using a slash syntax. Instead of using separate text-lg and leading-7 utilities, you can use text-lg/7 to set both in one class. This works with any value defined in the line-height scale, and supports arbitrary values like text-sm/[17px].
Font-size and line-height example in v3.3
```html <!-- Before --> <p class="text-lg leading-7 ..."> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> <!-- After --> <p class="text-lg/7 ..."> So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> <!-- Arbitrary value --> <p class="text-sm/[17px] ..."></p> ```
List-style-image utilities in v3.3
Tailwind CSS v3.3 added new list-image-* utilities for the CSS list-style-image property. These utilities allow you to use custom images as list item markers. You can use arbitrary values to specify any image URL or configure preset values in the listStyleImage section of your theme.
List-style-image example in v3.3
```html <ul class="list-image-[url(/carrot.png)] ..."> <li>5 cups chopped Porcini mushrooms</li> <li>1/2 cup of olive oil</li> <li>3lb of celery</li> </ul> ```
Caption-side utilities in v3.3
Tailwind CSS v3.3 added new caption-* utilities for controlling the placement of table caption elements. These utilities use the CSS caption-side property to position captions at the top or bottom of their associated tables.
Caption-side example in v3.3
```html <table> <caption class="caption-bottom pt-4 text-xs text-slate-500"> Table 3.1: Professional wrestlers and their signature moves. </caption> <thead> <tr> <th>Wrestler</th> <th>Signature Move(s)</th> </tr> </thead> <tbody> <tr> <td>"Stone Cold" Steve Austin</td> <td>Stone Cold Stunner, Lou Thesz Press</td> </tr> <tr> <td>Bret "The Hitman" Hart</td> <td>The Sharpshooter</td> </tr> <tr> <td>Razor Ramon</td> <td>Razor's Edge, Fallaway Slam</td> </tr> </tbody> </table> ```
Dynamic viewport units in v3.4: h-dvh, h-lvh, h-svh
Tailwind CSS v3.4 added support for dynamic viewport height units: h-svh (small viewport height), h-lvh (large viewport height), and h-dvh (dynamic viewport height). These also have min-h and max-h variants. The dynamic viewport units accommodate disappearing browser UI on mobile devices, making full-height layouts work correctly.
size-* utility sets width and height simultaneously in v3.4
Tailwind CSS v3.4 introduced the size-* utility that sets both width and height at the same time. For example, size-10 sets width: 100% and height: 100% with 10 units. This replaces the need to use separate h-* and w-* utilities.
text-balance and text-pretty utilities added in v3.4
Tailwind CSS v3.4 added text-balance (uses text-wrap: balance) for balanced headlines that distribute text evenly across lines, and text-pretty (uses text-wrap: pretty) for avoiding orphaned words at the end of paragraphs. Both are safe to use today as older browsers fall back to normal wrapping.
Extended min-width and min-height scales in v3.4
Tailwind CSS v3.4 extended the min-width, max-width, and min-height scales to include the full spacing scale. Classes like min-w-12 are now available out of the box.
forced-color-adjust utilities in v3.4
Tailwind CSS v3.4 added forced-color-adjust-auto and forced-color-adjust-none utilities to control how forced colors mode affects designs. These should be used sparingly, primarily when a specific color must be rendered regardless of forced colors mode, such as in e-commerce color selection.
Text shadow utilities in v4.1
Tailwind CSS v4.1 adds five text shadow utilities to the default theme: text-shadow-2xs, text-shadow-xs, text-shadow-sm, text-shadow-md, and text-shadow-lg. These utilities are useful for making headings stand out against busy backgrounds.
Text shadow color variations
Text shadows can be colored using utilities like text-shadow-<color>, for example text-shadow-sky-300. Opacity modifiers can be applied directly to text shadow size utilities, such as text-shadow-lg/50, which applies the shadow at 50% opacity with a black color by default.
Mask utilities for image and gradient masking
Tailwind CSS v4.1 adds mask utilities that use images and gradients to mask elements. These include mask-t-from-<value>, mask-r-from-<value>, mask-b-from-<value>, mask-l-from-<value>, mask-radial-<value>, and related positioning utilities. Multiple mask utilities can be composed together to create complex masks.
Overflow wrap utilities for text wrapping
The new overflow-wrap utilities are wrap-break-word and wrap-anywhere. The wrap-break-word utility allows long words or URLs to break without breaking layout. The wrap-anywhere utility is similar but allows mid-word line breaks when calculating intrinsic size, replacing the need to set min-width: 0 on child elements in flex containers.
Colored drop shadow support
Drop shadows can now be colored using utilities like drop-shadow-<color>, for example drop-shadow-indigo-500 or drop-shadow-cyan-500/50. This allows customization of both the drop shadow size and its color.
Pointer device targeting variants
The pointer-fine and pointer-coarse variants let you style elements differently based on the user's primary pointing device. pointer-fine targets precise devices like mice and trackpads, while pointer-coarse targets lower-precision devices like touchscreens. The any-pointer-fine and any-pointer-coarse variants check if any pointing device matches, not just the primary one.
Last baseline alignment utilities
The items-baseline-last utility aligns flex or grid items to the baseline of the last line of text. The self-baseline-last utility does the same for individual items. These utilities address the need to align content to the last line's baseline rather than the container end.
Safe alignment utilities
The safe alignment utilities (e.g., justify-center-safe) change the alignment to start when the container starts to overflow, ensuring content only overflows in one direction. These utilities work with both flexbox and grid layouts and are available for all alignment properties.
Details content variant
The details-content variant targets the content container of a <details> element, allowing styling of the container itself. This is useful for positioning the content relative to the <summary> element.
Inverted colors variant
The inverted-colors variant conditionally applies styles when the user has enabled an inverted color scheme in their operating system. This is useful for preventing black shadows from being turned white when inverted colors are enabled.
No-script variant for disabled JavaScript
The noscript variant conditionally applies styles when JavaScript is disabled. This allows you to show a message or hide interactive elements when JS is not available. Example: <div class="hidden noscript:block">Please enable JavaScript</div>
Form validation variants user-valid and user-invalid
The user-valid and user-invalid variants apply styles only after the user has interacted with form controls, avoiding initial invalid states on page load. These replace the need to use :invalid pseudo-class which triggers immediately. Example: <input required class="border user-valid:border-green-500 user-invalid:border-red-500" />
Tailwind CSS v4.3 release date and features
Tailwind CSS v4.3 was released on 2026-05-08. This release includes new scrollbar utilities, a new @container-size utility for size containers, new zoom-* utilities, new tab-* utilities for tab-size control, stacked and compound @variant support, and default values for functional utilities using --default(…).