CSS

Colors

aboutTailwind v4.0 Beta 1

They are switching from sRGB to OKLCH.

First time I heard of OKLCH tbh. Anyone know if that is part of a wider adoption trend or is Tailwind pioneering here?

Looking at the examples it does seem to offer some advantages; but was primarily surprised that they now use it as a default.

OKLCH is a curve that makes everything look nicer lol
https://abhisaha.com/blog/interactive-post-oklch-color-space/

source: https://news.ycombinator.com/item?id=42211108

Snippets

Frosted glass effect

Frosted glass from games to the web
https://news.ycombinator.com/item?id=42225481
https://www.tyleo.com/html-glass.html

<div class="glass">  <div class="light" data-js-background-attachment-fixed/>  <div class="drag-me">Drag Me</div></div>

.glass {  /* Blur effect */  backdrop-filter: blur(10px);  -webkit-backdrop-filter: blur(10px);
  box-shadow:    /* Bottom and right depth effect */    inset -0.75px -0.5px rgba(255, 255, 255, 0.1),    /* Top and left depth effect */    inset +0.75px +0.5px rgba(255, 255, 255, 0.025),    /* Shadow effect */    3px 2px 10px rgba(0, 0, 0, 0.25),    /* Short subsurface effect */    inset 0px 0px 10px 5px rgba(255, 255, 255, 0.025),    /* Long subsurface effect */    inset 0px 0px 40px 5px rgba(255, 255, 255, 0.025);
  /* Allow children to fill the parent */  position: relative;
  /* Round the corners */  border-radius: 5px;
  /* Hide the corners of the header */  overflow: hidden;}
.drag-me {  /* Center the content */  display: flex;  align-items: center;  justify-content: center;
  /* Size the content */  height: 30px;
  /* Add a transparent background */  background-color: rgba(12, 13, 14, 0.75);}

Next-level frosted glass with backdrop-filter
https://news.ycombinator.com/item?id=42302907
https://www.joshwcomeau.com/css/backdrop-filter/