Home

Awesome

tailwindcss-full-bleed

A plugin that provides utilities for extended backgrounds and borders.

Demo

Installation

Install the plugin from npm:

npm install -D tailwindcss-full-bleed

or

yarn add -D tailwindcss-full-bleed

Then add the plugin to your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-full-bleed'),
    // ...
  ],
}

Usage

ClassDescription
bleed-{color}Any tailwind color to specify the bleed color.
bleed-bgA background that extends to the left and right.
bleed-bg-lA background that extends to the left.
bleed-bg-rA background that extends to the right.
bleed-border1px top and bottom border that extends to the left and right.
bleed-border-t1px top border that extends to the left and right.
bleed-border-b1px bottom border that extends to the left and right.
bleed-border-l1px top and bottom border that extends to the left.
bleed-border-r1px top and bottom border that extends to the right.
bleed-border-tl1px top border that extends to the left.
bleed-border-tr1px top border that extends to the right.
bleed-border-bl1px bottom border that extends to the left.
bleed-border-br1px bottom border that extends to the right.
bleed-border-br-22px bottom border that extends to the right.
bleed-border-br-44px bottom border that extends to the right.
bleed-border-br-88px bottom border that extends to the right.
bleed-border-br-[14px]14px bottom border that extends to the right.
bleed-noneTo remove any full-bleeding.

Extending the Plugin

bleed-{color} and bleed-border-{borderWidth} values are using Tailwind's colors and borderWidth configuration. If you want to extend the classes provided by this plugin, you will need to extend the colors (or bleedColors) and borderWidth (or bleedBorderWidth) utilities in your tailwind.config.js file.

For example, to add a new color to the bleed-{color} utility, add the color to your colors configuration:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#4f46e5'
        }
      }
    }
  },
  // ...
}

Similarly, to add a new border width to the bleed-border utility, add the width to your borderWidth configuration:

module.exports = {
  theme: {
    extend: {
      borderWidth: {
        10: '10px'
      }
    }
  },
  // ...
}

If you want to add colors that only apply to bleed utilities, use bleedColors property instead:

module.exports = {
  theme: {
    extend: {
      bleedColors: {
        primary: {
          DEFAULT: '#4f46e5' // <- only avaiable for bleed-{color} classes
        }
      }
    }
  },
  // ...
}

If the same color is avaiable in colors, bleedColors will override the color value for bleed-{color} classes. Use bleedBorderWidth property for bleed only border widths as well.