Node Packaged Modules

    tailwindcss-padded-radius

    1.0.0 • Public • Published

    Tailwind CSS Pulgin for Matching Border Radii

    Installation

    npm install tailwindcss-padded-radius

    Setup

    // tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          paddedRadius: {
            /* The number of spacings to generate */
            // numberOfSpacings: 64,
     
            /* The spacing that the other spacings are multiples of */
            // baseSpacing: "0.25rem",
     
            /* A spacigns object to use in place of numberOfSpacings and baseSpacing */
            // spacings: { '1': '0.25rem', '2': '0.5rem', '3': '0.75rem' }
     
            /* Whether negative versions should be generated */
            // generateNegative: false,
          },
        },
      },
      plugins: [require("tailwindcss-padded-radius")],
      variants: {
        borderRadius: ["responsive", "paddedRadius"],
      },
    };

    Usage

    For nested border radii to match, the outer radius must be equal to the inner radius plus the distance between them. This plugin adds variants to borderRadius utilties that let you easily tweak border radii using the same scale that is used for padding and margin. So if the inner div has rounded-md and m-2 and the outer div has p-3, the outer radius should be rounded-md-5.

    <div class="rounded-md-5 p-3  bg-gray-700">
      <div class="rounded-md m-2  w-32 h-32 bg-gray-200"></div>
    </div>

    Install

    npm i tailwindcss-padded-radius

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    4.56 kB

    Total Files

    4

    Last publish

    Collaborators

    • locksten