[](https://www.npmjs.com/package/tailwindcss-extrude)
[](https://www.npmjs.com/package/tailwindcss-extrude)
[](https://bundlephobia.com/result?p=tailwindcss-extrude)
A custom TailwindCSS plugin for an extruded style.
## Installation
```bash
$ npm i tailwindcss-extrude
```
Add the plugin to `tailwind.config.cjs`:
```js
module.exports = {
...
theme: { ... },
plugins: [require('tailwindcss-extrude')]
};
```
## Usage
At its core, `tailwindcss-extrude` uses a box shadow and a translate transform to create the illusion of an extrusion. It cannot be used with a regular box shadow or other transforms.
Give an element an extrusion by applying the following classes:
* `extrude-{color}`
* `extrude-x-{depth}` or `-extrude-x-{depth}`
* `extrude-y-{depth}`
### Extending extrude depths
By default, `depth` can be:
```js
{
DEFAULT: '2px', // if no depth is provided, defaults to 2px.
0: '0',
2: '4px',
3: '6px',
4: '8px',
6: '12px',
8: '16px'
}
```
This plugin uses the `extrude` key in the Tailwind CSS config file. You can extend the lengths used for extrude depth here.
```js
module.exports = {
...
theme: {
extend: {
'one-line': '1em',
}
},
plugins: [require('tailwindcss-extrude')]
};
```
```html
```
## Examples
Some examples of how `tailwindcss-extrude` can be used.
```html
```
```html