Directional Shadows for Tailwind CSS

tailwindcss-directional-shadows is a plugin for Tailwind CSS that introduces directional shadow utilities. This provides more flexibility in casting shadows in specific directions and also allows for the creation of shadows as borders, which can be particularly useful with position: sticky on tables.

• Installation
• Usage
  • Directional Shadows
  • Shadows as Borders
• Why use tailwindcss-directional-shadows

Installation

You can install the plugin via npm:

npm install tailwindcss-directional-shadows

Then, include it in your tailwind.config.js:

module.exports = {
  plugins: [
    require('tailwindcss-directional-shadows'),
  ]
}

Usage

The plugin provides several utilities for applying shadows in different directions. Here's an overview:

Directional Shadows

You can apply shadows in specific directions using the shadow-[direction]-[size] utility. The direction can be top (t), right (r), bottom (b), or left (l). The size is optional and can be one of sm, md, lg, xl, 2xl, or left blank for the default size.

<div class="shadow-t">...</div>
<div class="shadow-r-sm">...</div>
<div class="shadow-b-md">...</div>
<div class="shadow-l-xl">...</div>

Shadows as Borders

Shadows can also be used as borders, which can be especially useful with position: sticky on tables. The plugin provides several utilities for this purpose:

• shadow-border-[size] applies the shadow border on all sides.
• shadow-border-x-[size] applies the shadow border on the left and right.
• shadow-border-y-[size] applies the shadow border on the top and bottom.
• shadow-border-t-[size], shadow-border-b-[size], shadow-border-l-[size], and shadow-border-r-[size] apply the shadow border on the top, bottom, left, and right, respectively.

<div class="shadow-border-2">...</div>
<div class="shadow-border-x-4">...</div>
<div class="shadow-border-y-2">...</div>
<div class="shadow-border-t-4">...</div>

Please replace [size] with an appropriate size from the Tailwind CSS border width scale (e.g., 2, 4, etc.).

Why use tailwindcss-directional-shadows

tailwindcss-directional-shadows allows you to easily apply shadows in different directions and use shadows as borders. This enhances the flexibility of your designs, enabling more precise shadow control and introducing new design possibilities such as shadow-bordered tables with sticky positioning.

---

I hope you find tailwindcss-directional-shadows a valuable addition to your projects. If you have any issues or suggestions, don't hesitate to open an issue or pull request.

If you liked this, you might also like my other Tailwind CSS plugins:

• tailwindcss-multi: Group utilities together by variant
• tailwindcss-signals: Apply styles based on parent or ancestor state, a state-driven alterative to groups
• tailwindcss-members: Apply styles based on child or descendant state, the inverse of groups
• tailwindcss-mixins: Construct reusable & aliased sets of utilities inline
• tailwindcss-selector-patterns: Dynamic CSS selector patterns
• tailwindcss-js: Effortless build-time JS script injection
• tailwindcss-default-shades: Default shades for simpler color utility classes
• tailwind-lerp-colors: Expand your color horizons and take the fuss out of generating new—or expanding existing—color palettes