https://github.com/locksten/tailwindcss-padded-radius

A Tailwind CSS plugin for matching border radii
https://github.com/locksten/tailwindcss-padded-radius

border-radius tailwindcss tailwindcss-plugin

Last synced: 11 days ago
JSON representation

A Tailwind CSS plugin for matching border radii

• Host: GitHub
• URL: https://github.com/locksten/tailwindcss-padded-radius
• Owner: locksten
• License: mit
• Created: 2020-08-04T22:12:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T13:20:46.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T19:27:35.575Z (26 days ago)
• Topics: border-radius, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage:
• Size: 865 KB
• Stars: 24
• Watchers: 1
• Forks: 3
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Tailwind CSS Pulgin for Matching Border Radii



  



## Installation

```bash

npm install tailwindcss-padded-radius

```

## Setup

```js

// 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`.

```html



  




```