shadows

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #llm #android #machine-learning #deep-learning #linux #docker #macos #awesome #cli #ios

(★ 28)

Extend TailwindCSS to support directional shadows

shadows 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h1 align="center">Directional Shadows for Tailwind CSS</h1>

[![minified size](https://img.shields.io/bundlephobia/min/tailwindcss-directional-shadows)](https://bundlephobia.com/package/tailwindcss-directional-shadows)
[![license](https://img.shields.io/github/license/brandonmcconnell/tailwindcss-directional-shadows?label=license)](https://github.com/brandonmcconnell/tailwindcss-directional-shadows/blob/main/LICENSE)
[![version](https://img.shields.io/npm/v/tailwindcss-directional-shadows)](https://www.npmjs.com/package/tailwindcss-directional-shadows)
[![twitter](https://img.shields.io/twitter/follow/branmcconnell)](https://twitter.com/branmcconnell)

</div>

`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](#installation)
- [Usage](#usage)
  - [Directional Shadows](#directional-shadows)
  - [Shadows as Borders](#shadows-as-borders)
- [Why use `tailwindcss-directional-shadows`](#why-use-tailwindcss-directional-shadows)

## Installation

You can install the plugin via npm:

```bash
npm install tailwindcss-directional-shadows
```

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

```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.

```html
<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.

```html
<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](https://github.com/brandonmcconnell/tailwindcss-multi): Group utilities together by variant
* [tailwindcss-signals](https://github.com/brandonmcconnell/tailwindcss-signals): Apply styles based on parent or ancestor state, a state-driven alterative to groups
* [tailwindcss-members](https://github.com/brandonmcconnell/tailwindcss-members): Apply styles based on child or descendant state, the inverse of groups
* [tailwindcss-mixins](https://github.com/brandonmcconnell/tailwindcss-mixins): Construct reusable & aliased sets of utilities inline
* [tailwindcss-selector-patterns](https://github.com/brandonmcconnell/tailwindcss-selector-patterns): Dynamic CSS selector patterns
* [tailwindcss-js](https://github.com/brandonmcconnell/tailwindcss-js): Effortless build-time JS script injection
* [tailwindcss-default-shades](https://github.com/brandonmcconnell/tailwindcss-default-shades): Default shades for simpler color utility classes
* [tailwind-lerp-colors](https://github.com/brandonmcconnell/tailwind-lerp-colors): Expand your color horizons and take the fuss out of generating new—or expanding existing—color palettes

shadows

shadows 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

shadows

shadows 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README