A plugin that provides utilities for extended backgrounds and borders.

Related tags

Learning resource tailwindcss tailwindcss-plugin
Overview

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

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.

Configuration

You can configure which values and variants are generated by this plugin under the bleedBorder and bleedColor keys in your tailwind.config.js file:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      bleedBorder: {
        // ...
      },
      bleedColor: {
        // ...
      }
    }
  }
}
You might also like...

Base provides advanced Promise Queue Manager, Custom Console Logger and other utilities.

Base Base provides frequently used functionality like cutome logger, response helper, Custom Promise and Instance composer. These are used in almost a

Jun 14, 2022

A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Nov 21, 2022

Basic types & utilities for Strapi v4 and plugin creators

Strapi v4 - Types & utilities Basic set of types and utilities for Strapi v4 and plugins creators A developers goodie for Strapi Headless CMS which pr

Oct 14, 2022

This plugin add a new utilities classes so you can use from 0% to 100%!

This plugin add new utilities classes so you can use from 0% to 100%!

Apr 3, 2022

TSServer plugin & Utilities for "expanding" TypeScript types

TSServer plugin & Utilities for

ts-expand-type This repo provides a TS Server plugin which amends quick info to include the fully "expanded" type. "Expanded" means that object inters

Nov 20, 2022

A plugin for Strapi that provides the ability to easily schedule publishing and unpublishing of any content type

A plugin for Strapi that provides the ability to easily schedule publishing and unpublishing of any content type

strapi-plugin-publisher A plugin for Strapi that provides the ability to easily schedule publishing and unpublishing of any content type. Requirements

Dec 7, 2022

An Obsidian plugin that provides commands for bulk enabling/disabling of plugins and CSS Snippets

An Obsidian plugin that provides commands for bulk enabling/disabling of plugins and CSS Snippets

An Obsidian plugin that provides commands for bulk enabling/disabling of plugins and CSS Snippets. Useful for debugging when you have many plugins or CSS snippets.

Dec 27, 2022

A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email.

A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email.

Strapi PasswordLess Plugin A plugin for Strapi Headless CMS that provides ability to sign-in/sign-up to an application by link had sent to email. A pl

Dec 12, 2022

Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Dec 8, 2022
Releases(v1.0.0)
Owner
Doğukan Çavuş
Remote only. Building stuff with CSS, Vue, React and whatever I find useful and fun.
Doğukan Çavuş
GitHub https://dgknca.github.io/tailwindcss-full-bleed/
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A lightweight JavaScript plugin for particle backgrounds.

ak-kaleidoscope ak-kaleidoscope is a lightweight JavaScript plugin for particle backgrounds. Demo See demo page. The examples code can be found in the

akari 10 Apr 23, 2022
Obsidian plugin allowing for linking to a heading range, in the [[Page#HeaderA#HeaderB]] extended wikilink format.

Obsidian Link Heading Range Plugin This is a plugin for Obsidian (https://obsidian.md). It allows linking to a heading range, in the [[Page#HeaderA#He

Anthropologie Biblique 7 Nov 14, 2022
A plugin that provides utilities for animation property.

tailwindcss-animation-property A plugin that provides utilities for animation property. Not only does the plugin provide the usual animation propertie

ZXT 12 Sep 23, 2022
LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, vid

Andrea Verlicchi 7.1k Jan 2, 2023
Simple and Extensible Markdown Parser for Svelte, however its simplicity can be extended to any framework.

svelte-simple-markdown This is a fork of Simple-Markdown, modified to target Svelte, however due to separating the parsing and outputting steps, it ca

Dave Caruso 3 May 22, 2022
An extended table to integration with some of the most widely used CSS frameworks.

An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)

文翼 11.4k Dec 20, 2022
Extended version of create-t3-app to make it even faster to start (or maybe slower)

create-T3-app with extra tools/config out of the box create-t3-app is one of the fastest and easiest way to scaffold fullstack app. create-t3-extended

A Riolly C 7 Jan 4, 2023