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

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.