A plugin that provides utilities for extended backgrounds and borders.
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'),
// ...
],
}
Class | Description |
---|---|
bleed-{color} |
Any tailwind color to specify the bleed color. |
bleed-bg |
A background that extends to the left and right. |
bleed-bg-l |
A background that extends to the left. |
bleed-bg-r |
A background that extends to the right. |
bleed-border |
1px top and bottom border that extends to the left and right. |
bleed-border-t |
1px top border that extends to the left and right. |
bleed-border-b |
1px bottom border that extends to the left and right. |
bleed-border-l |
1px top and bottom border that extends to the left. |
bleed-border-r |
1px top and bottom border that extends to the right. |
bleed-border-tl |
1px top border that extends to the left. |
bleed-border-tr |
1px top border that extends to the right. |
bleed-border-bl |
1px bottom border that extends to the left. |
bleed-border-br |
1px bottom border that extends to the right. |
bleed-border-br-2 |
2px bottom border that extends to the right. |
bleed-border-br-4 |
4px bottom border that extends to the right. |
bleed-border-br-8 |
8px bottom border that extends to the right. |
bleed-border-br-[14px] |
14px bottom border that extends to the right. |
bleed-none |
To remove any full-bleeding. |
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.