https://github.com/hacknug/tailwindcss-background-extended

All of the missing background utilities for Tailwind CSS.
https://github.com/hacknug/tailwindcss-background-extended

tailwind tailwind-css tailwindcss tailwindcss-plugin

Last synced: about 2 months ago
JSON representation

All of the missing background utilities for Tailwind CSS.

• Host: GitHub
• URL: https://github.com/hacknug/tailwindcss-background-extended
• Owner: hacknug
• Created: 2018-08-19T16:20:37.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-04-26T08:58:38.000Z (over 1 year ago)
• Last Synced: 2024-10-14T10:53:19.308Z (2 months ago)
• Topics: tailwind, tailwind-css, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tailwindcss-background-extended
• Size: 53.7 KB
• Stars: 26
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# Tailwind CSS Background Extended Plugin

This plugin adds all of the missing background utilities to Tailwind CSS.

## Installation

Add this plugin to your project:

```bash

# Install using pnpm

pnpm install --save-dev tailwindcss-background-extended

# Install using npm

npm install --save-dev tailwindcss-background-extended

# Install using yarn

yarn add -D tailwindcss-background-extended

```

## Usage

```js

// tailwind.config.js

{

  theme: {

    backgroundImage: { // defaults to {}

      tailwindcss: "url('https://avatars0.githubusercontent.com/u/30317862')",

    },

  },

  variants: { // all the following default to ['responsive']

    backgroundImage: ['responsive'],

    backgroundClip: ['responsive'],

    backgroundOrigin: ['responsive'],

  },

  plugins: [

    require('tailwindcss-background-extended'), // no options to configure

  ],

}

```

```css

.bg-image-tailwindcss { background-image: url('https://avatars0.githubusercontent.com/u/30317862'); }

.bg-clip-border { background-clip: border-box; }

.bg-clip-padding { background-clip: padding-box; }

.bg-clip-content { background-clip: content-box; }

.bg-clip-text { background-clip: text; }

.bg-origin-border { background-origin: border-box; }

.bg-origin-padding { background-origin: padding-box; }

.bg-origin-content { background-origin: content-box; }

```