tailwindcss-extrude

Extrude your elements for a retro look!

Usage no npm install needed!

<script type="module">
  import tailwindcssExtrude from 'https://cdn.skypack.dev/tailwindcss-extrude';
</script>

README

tailwindcss-extrude-banner

npm version npm downloads license build size

A custom TailwindCSS plugin for an extruded style.

Installation

$ npm i tailwindcss-extrude

Add the plugin to tailwind.config.cjs:

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:

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

module.exports = {
  ...
  theme: {
    extend: {
      'one-line': '1em',
    }
  },
  plugins: [require('tailwindcss-extrude')]
};

<button class="extrude-black extrude-y-one-line"/>

Examples

Some examples of how tailwindcss-extrude can be used.

example1

<button class="
    transition bg-yellow border-4 border-orange rounded-xl
    extrude-y-4 hover:extrude-y-2 extrude-orange"/>

example2

<button class="
    transition bg-white border-4 border-black rounded-none
    -extrude-x-4 extrude-y-4 hover:-extrude-x-2 hover:extrude-y-2
    extrude-green hover:extrude-black"/>