Shadow & Borders

Twigwind provides comprehensive styling utilities for shadows, borders, and opacity effects.

Shadow Utilities

Twigwind supports 3 types of shadow utilities:

1. Predefined shadow- these are the default shadow utilities provided by Twigwind.


2. Custom shadow- these allow you to create your own shadow utilities with specific values.


3. text-shadow- these utilities allow you to add shadow effects to text elements.

Predefined shadow

Twigwind provides several predefined shadow utilities that you can use to add depth and dimension to your elements. These utilities include:

• shadow-sm: Applies a small shadow to the element.


• shadow-md: Applies a medium shadow to the element.


• shadow-lg: Applies a large shadow to the element.


• shadow-xl: Applies an extra-large shadow to the element.


• shadow-2xl: Applies a double extra-large shadow to the element.


• shadow-none: Removes any shadow from the element.

<div class="bg-white shadow-sm p-5 mb-5">Small Shadow</div>
<div class="bg-white shadow-md p-5 mb-5">Medium Shadow</div>
<div class="bg-white shadow-lg p-5 mb-5">Large Shadow</div>
<div class="bg-white shadow-xl p-5 mb-5">Extra Large Shadow</div>
<div class="bg-white shadow-2xl p-5 mb-5">2X Large Shadow</div>
<div class="bg-white shadow-none p-5 mb-5">No Shadow</div>

Custom shadow

In addition to the predefined shadow utilities, Twigwind also allows you to create custom shadow utilities using arbitrary values.
You can specify your own shadow values by using the shadow-[value] syntax.

<div class="bg-white shadow-0_4px_6px_-1px_rgba(0,0,0,0.1) p-5 mb-5">Custom Shadow 1</div>

Text Shadow

Apply shadow effects to text elements using the text-shadow-[value] syntax.

<h1 class="text-shadow-2px_2px_4px_rgba(0,0,0,0.5)">Text with Shadow</h1>

Border Utilities

Twigwind provides flexible border utilities for creating borders with different widths, colors, and directional control.

Border Width

Set border width using numeric values. The framework automatically adds "px solid" to create complete border declarations.

<!-- All sides -->
<div class="border-1">1px solid border</div>
<div class="border-2">2px solid border</div>
<div class="border-4">4px solid border</div>

<!-- Directional borders -->
<div class="border-t-2">Top border only</div>
<div class="border-b-3">Bottom border only</div>
<div class="border-l-1">Left border only</div>
<div class="border-r-4">Right border only</div>

Border Colors

Set border colors using predefined color names or custom values. Works with all directional variants.

<!-- Predefined colors -->
<div class="border-2 border-red">Red border</div>
<div class="border-3 border-blue">Blue border</div>
<div class="border-1 border-green">Green border</div>

<!-- Custom colors -->
<div class="border-2 border-#ff6b35">Custom hex border</div>
<div class="border-1 border-rgb(60,180,75)">Custom RGB border</div>

<!-- Directional colored borders -->
<div class="border-t-red border-b-blue">Top red, bottom blue</div>
<div class="border-l-purple border-r-orange">Left purple, right orange</div>

Border Radius

Create rounded corners using the border-radius-[value] syntax.

<div class="border-2 border-blue border-radius-4px">4px rounded corners</div>
<div class="border-2 border-green border-radius-8px">8px rounded corners</div>
<div class="border-2 border-purple border-radius-50%">Circular border</div>

Combined Border Examples

Combine border width, color, and radius for complete border styling.

<!-- Card with complete border styling -->
<div class="bg-white border-2 border-lightBlue border-radius-8px p-20 shadow-md">
  <h3 class="color-blue mb-10">Card Title</h3>
  <p class="color-blueGrey">Card content with styled borders</p>
</div>

<!-- Button with hover border effects -->
<button class="bg-blue color-white p-10 border-2 border-transparent hover:border-white border-radius-6px transition:all_0.2s_ease">
  Hover for border
</button>

<!-- Directional accent borders -->
<div class="bg-white border-l-4 border-purple p-15">
  <p>Left accent border</p>
</div>

Opacity Utilities

Control element opacity using percentage-based values from 0-100.

<div class="bg-blue opacity-100">Fully opaque (100%)</div>
<div class="bg-blue opacity-75">75% opacity</div>
<div class="bg-blue opacity-50">50% opacity</div>
<div class="bg-blue opacity-25">25% opacity</div>
<div class="bg-blue opacity-0">Fully transparent (0%)</div>

<!-- Hover opacity effects -->
<div class="bg-purple opacity-75 hover:opacity-100 transition:all_0.3s_ease">
  Hover to increase opacity
</div>

Responsive & State Variants

All border, shadow, and opacity utilities support responsive breakpoints and hover states.

<!-- Responsive borders -->
<div class="border-1 md:border-2 lg:border-4 border-blue">Responsive border width</div>

<!-- Hover effects -->
<div class="border-2 border-gray hover:border-blue hover:shadow-lg transition:all_0.3s_ease">
  Hover for border and shadow change
</div>

<!-- Dark mode variants -->
<div class="border-2 border-gray dark:border-white">Dark mode border</div>