tailwindcss-box-shadow

    1.0.0 • Public • Published

    tailwindcss-box-shadow

    A plugin that generates shadow utilities exactly as you have them defined in your theme config, without CSS variables.

    But... why?

    I needed shadow utilities in Maizzle that don't rely on the new CSS variables strategy in Tailwind CSS 2.x.

    Installation

    Install the plugin from npm:

    # Using npm
    npm install tailwindcss-box-shadow
    
    # Using Yarn
    yarn add tailwindcss-box-shadow

    Then add the plugin to your tailwind.config.js file, making sure to disable the default boxShadow plugin:

    // tailwind.config.js
    module.exports = {
      theme: {
        // ...
      },
      corePlugins: {
        boxShadow: false,
      },
      plugins: [
        require('tailwindcss-box-shadow'),
        // ...
      ],
    }

    Usage

    Use the shadow-{n} utilities to add box shadows to elements:

    <div class="shadow-xl">
      Fugiat id id enim commodo.
    </div>

    Configuration

    You can configure which values and variants are generated by this plugin under the boxShadow key in your tailwind.config.js file:

    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          boxShadow: {
            button: '0 3px 9px 0 rgba(0, 0, 0, 0.09)',
          }
        }
      },
      variants: {
        boxShadow: ['responsive', 'hover']
      }
    }

    Install

    npm i tailwindcss-box-shadow

    DownloadsWeekly Downloads

    2,437

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    6.61 kB

    Total Files

    9

    Last publish

    Collaborators

    • cossssmin