Gradient color css install#

Well wish granted - in Tailwind CSS v3.3 we’ve added a new 950 shade for every single color. One of the most common feature requests we’ve had over the years is to add darker shades for every color - usually because someone is building a dark UI and just wants more options down in that dark end of the spectrum.

Gradient color css install#

Upgrading your projects is as easy as installing the latest version of tailwindcss from npm: npm install -D can also try out all of the new features on Tailwind Play, right in your browser. That covers the most exciting stuff, but check out the release notes for an exhaustive list of every single little improvement we’ve made since the last release.

New caption-side utilities: Title your tables with style.

New hyphens utilities: For fine-tuning hyphenation behavior.

New list-style-image utilities: So you can use horrible clip art for bullet points.

Configurable font-variation-settings: Baked directly into your font-* utilities.

CSS variables without the var(): New shorthand syntax for arbitrary values.

New line-height modifier: Set your font-size and line-height with one class.

Line-clamp out of the box: Truncate multi-line text without a plugin.

Fine-tune gradient color stop positions: Specify exactly where you want each color stop to go.

Simplified RTL support with logical properties: Build layouts that adapt to different directions.ESM and TypeScript support: Write your config file using ESM or TypeScript.Extended color palette for darker darks: New darker 950 shades for every color.Tailwind CSS v3.3 is here - bringing a bunch of new features people have been asking for forever, and a bunch of new stuff you didn’t even know you wanted. We could have written this in several other ways, all of which are valid. …where it is assumed that the location of the gradient starts at the very center of the element ( 50% 50%) and is evenly distributed between the twi color values. Any color value is accepted here, including hex, named, RGB and HSL. color-stop: These are color values that define the gradient.We can also specify an exact position using a numeric value, including percentage, all of which are relative to the element’s bounding box. That means top, right, left, and center all work here, as well as combinations where two named values (e.g.

position: This works very much the same way that it does on background-position.Again, negative values are a no-no, but percentages are fair game since the size is relative to the gradient box rather than the element. or percentage: A second numeric value can be provided to declare the explicit size of an ellipse, but not a circle.Sorry, no negative units or percentages allowed because a negative circle would be vacuum and percentages can be relative to any number of surrounding values. This has to be stated in positive pixels or relative units. radius: We can specify a numeric value that serves as the circle’s radius.

farthest-corner: The opposite of closest-corner, where the gradient ends at the corner that is located furthest from the shape’s center.

closest-corner: The gradient will end at the corner that matches as the closest to the shape’s center.

farthest-side (default): The opposite of closest-side, where the gradient will end at the side furthest from the shape’s center.

If two sides match this criteria, then it will be evenly distributed.

closest-side: The gradient will end at side closest to the center of the shape.

This can be expressed by name or an exact measure of length.

size: Influences the ending shape of the gradient by taking the shape value and instructing where the gradient should end based on the center of the shape.

For example, an element that is a perfect square would be a great match for circle whereas anything rectangular is ripe for ellipse. We can omit this value and the notation will measure the element’s side lengths to determine whether one value better matches the situation. Since we’re talking about radial gradients, the shapes are limited to being circular in nature.

shape: Determines the shape of the gradient follows when transitioning outward, from one color to the next.

The radial-gradient notation accepts the following values: