tailwindcss-extrude

    1.0.0 • Public • Published

    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"/>

    Install

    npm i tailwindcss-extrude

    DownloadsWeekly Downloads

    5

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    6.36 kB

    Total Files

    6

    Last publish

    Collaborators

    • bryanmylee