BackgroundFill

Description

This plugin creates classes to draw a 100vw background colour pseudo layer:

• .background-fill
• .background-fill-* (where * is one of your theme background colors)

Setup

const { BackgroundFill } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [BackgroundFill],
  theme: {
    backgroundColor: {
      header: "#e6e6e6",
      accent: "#004F91",
    }
  }
  ...
};

Demo

By default, background-fill will inhert the background colour of the container its attached to:

<div class="bg-header background-fill">...</div>

And so changing the background will change the background fill:

<div class="bg-accent background-fill">...</div>

You can also use any of your theme backgroundColor directly, without applying a background to your container:

<div class="background-fill-accent">...</div>

This will be especially useful if your background is semi transparent so you don't have a doubling up of layers.

To clear a background-fill there is a background-fill-none class:

<div class="bg-header background-fill md:bg-accent lg:background-fill-none">...</div>

In that example, responsive background classes change the colour of the background and then at lg the background fill is switched off.

Using background-fill-* classes, you would: