A collection of useful Tailwind plugins from the team at Josephmark
npm i -S @josephmark/tailwind-plugins
Oklab is a perceptual colourspace that is particularly good for gradients as it has a more uniform perceived lightness and hue compared to other colourspaces.
Using Oklab interpolation can make your CSS gradients a bit sweeter and more natural, however it's not supported in Firefox yet.
First, add oklab to your tailwind.config.js file:
// tailwind.config.js
const { oklab } = require("@josephmark/tailwind-plugins")
module.exports = {
plugins: [oklab],
}supports-oklab
Check for CSS support of Oklab colours
supports-oklab-grad
Check for CSS support of Oklab gradient interpolation
Note - all Oklab colour utilities currently allow JIT values only since your theme is probably in hex or RGB.
bg-gradient-oklab-to-[direction]
Use Oklab interpolation for gradients
eg: bg-gradient-oklab-to-r from-red-500 to-blue-500 or supports-oklab-grad:bg-gradient-oklab-to-r from-red-500 to-blue-500
Note: colours don't need to be Oklab to use interpolation
from-oklab-[colour]
Set gradient start to an Oklab colour
eg: from-oklab-[0.77_-0.09_-0.06] or supports-oklab:from-oklab-[0.77_-0.09_-0.06]
via-oklab-[colour]
Set gradient mid-point to an Oklab colour
eg: via-oklab-[0.78_0.06_0.16]
to-oklab-[colour]
Set gradient end to an Oklab colour
eg: to-oklab-[0.62_0.15_-0.16]
text-oklab-[colour]
Set text to an Oklab colour
eg: text-oklab-[0.77_-0.09_-0.06]
bg-oklab-[colour]
Set background to an Oklab colour
eg: bg-oklab-[0.77_-0.09_-0.06]
CSS containment can help with rendering optimisation, especially on long pages with lots of elements. Setting contain-content content-visibility-auto on an element will let the browser skip rendering it when it is offscreen, saving on render time.
First, add containment to your tailwind.config.js file:
// tailwind.config.js
const { containment } = require("@josephmark/tailwind-plugins")
module.exports = {
plugins: [containment],
}contain-[value]
Set the element's containment mode. Default values are available, and JIT values can be added for specific needs / combination values.
eg: contain-content or contain-[paint_layout]
content-visibility-[value]
Set the element's content visibility property.
eg: content-visibility-auto or content-visibility-hidden
contain-intrinsic-size
Set the element's contain-intrinsic-size property. This allows culled elements to contribute to the page's scroll height to minimise scrollbar jank.
eg: contain-intrinsic-size-auto or contain-intrinsic-size-[auto_500px]