Shadow

How to use custom 'tls' shadows

We’ve created custom shadow styles that serve as an excellent alternative to TailwindCSS shadows, specifically designed for use with cards.

default
md
lg
<div class="card bg-ui tls-shadow aspect-square"></div>
<div class="card bg-ui tls-shadow-md aspect-square"></div>
<div class="card bg-ui tls-shadow-lg aspect-square"></div>

Colors

Seamlessly integrates with TailwindCSS shadow color utilities.

default
md
lg
<div class="card bg-ui tls-shadow shadow-primary-800/15 aspect-square"></div>
<div class="card bg-ui tls-shadow-md shadow-primary-800/15 aspect-square"></div>
<div class="card bg-ui tls-shadow-lg shadow-primary-800/15 aspect-square"></div>