Tailwind CSS Plugin for "screen-wide" background color

Utility for defining a screen-wide background color that spreads beyond the boundaries of your element (typically <section>)

Inspired by Kevin Powell (View on YouTube 🎥 )

Installation

With NPM:

$ npm install tailwind-screen-wide-bg-color

With Yarn:

$ yarn add tailwind-screen-wide-bg-color

Configuration

In your tailwind.config.js file, add the plugin to the plugins array:

const screenWideBgPlugin = require('tailwind-screen-wide-bg-color');
...
module.export = {
    ...
    plugins: [
        screenWideBgPlugin({
            // options
        }),
        ...
    ]
}

Options

The plugin accepts an optional object with the following properties:

| Property | Type | Default | Description | | -------- | -------- | ----------- | ------------------------------------------- | | prefix | string | "wide-bg" | Prefix used to generate the utility classes |

Usage

In your html, add wide-bg-${color} to your element, for example:

<section className="wide-bg-red-500 max-w-screen-xl mx-auto p-4">
  <h1 className="text-2xl font-bold">Hello World</h1>
  <p className="text-gray-500 text-white">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec ultricies
    tincidunt, nunc nisl aliquam nisl, vitae aliquam nunc nisl sit amet nisl. Sed euismod, nisl nec
    ultricies tincidunt, nunc nisl aliquam nisl, vitae aliquam nunc nisl sit amet nisl.
  </p>
</section>