GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → hacknug → tailwindcss-background-extended

hacknug / tailwindcss-background-extended

Licence: other
All of the missing background utilities for Tailwind CSS.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

tailwindtailwindcsstailwind-csstailwindcss-plugin

Projects that are alternatives of or similar to tailwindcss-background-extended

tailwind-color-alpha
Automatic alpha variants for your Tailwind CSS colors based on your opacity config
Stars: ✭ 21 (-16%)
Mutual labels:  tailwind, tailwind-css, tailwindcss-plugin
tailwindcss-scrims
Configurable Tailwind plugin for generating scrim classes.
Stars: ✭ 35 (+40%)
Mutual labels:  tailwind, tailwind-css, tailwindcss-plugin
covid-19-stats
Get the latest COVID-19 statistics by country
Stars: ✭ 41 (+64%)
Mutual labels:  tailwind, tailwind-css
play-tailwind
Play is free and open source Tailwind CSS template for - Startup, SaaS, Apps, Business and More. It comes with a high-quality design and all essential components & pages you need to launch a complete website.
Stars: ✭ 60 (+140%)
Mutual labels:  tailwind, tailwind-css
Next-JS-Landing-Page-Starter-Template
🚀 Free NextJS Landing Page Template written in Tailwind CSS 3 and TypeScript ⚡️ Made with developer experience first: Next.js 12 + TypeScript + ESLint + Prettier + Husky + Lint-Staged + VSCode + Netlify + PostCSS + Tailwind CSS
Stars: ✭ 521 (+1984%)
Mutual labels:  tailwind, tailwind-css
memento-svelte-electron-typescript
Template to create a desktop app with Svelte, TailwindCSS, Electron and TypeScript (with electron-updater, electron-reload and electron-builder)
Stars: ✭ 27 (+8%)
Mutual labels:  tailwind, tailwind-css
react-tailwind
This is a complementary React code for the tailwindcss project.
Stars: ✭ 29 (+16%)
Mutual labels:  tailwind, tailwindcss-plugin
cra-tailwindcss
Integrate Tailwind CSS in a Create React App setup
Stars: ✭ 105 (+320%)
Mutual labels:  tailwind, tailwind-css
material-tailwind
@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
Stars: ✭ 861 (+3344%)
Mutual labels:  tailwind, tailwind-css
github-markdown-tailwindcss
⛵ Replicate GitHub Flavored Markdown with Tailwind CSS components
Stars: ✭ 100 (+300%)
Mutual labels:  tailwind, tailwind-css
tailwind-dashboard-template
Mosaic Lite is a free admin dashboard template built on top of Tailwind CSS and fully coded in React. Made by
Stars: ✭ 1,662 (+6548%)
Mutual labels:  tailwind, tailwind-css
axiom
Axiom - A Hugo Theme. GitTip: https://gitcoin.co/tip?username=jhauraw
Stars: ✭ 67 (+168%)
Mutual labels:  tailwind, tailwind-css
tailwindcss-postcss-browsersync-boilerplate
Tailwind CSS + PostCSS + BrowserSync boilerplate
Stars: ✭ 28 (+12%)
Mutual labels:  tailwind, tailwind-css
variantwind
Most elegant way to work with TailwindCSS variants in Vue
Stars: ✭ 45 (+80%)
Mutual labels:  tailwind, tailwindcss-plugin
movie-app
🌈 TMDB + Laravel + LiveWire + AlpineJS + ViewModels + Components = ❤️ Movies App 🔥
Stars: ✭ 43 (+72%)
Mutual labels:  tailwind-css, tailwindcss-plugin
eslint-plugin-tailwind
ESLint rules for Tailwind CSS
Stars: ✭ 97 (+288%)
Mutual labels:  tailwind, tailwind-css
tailwind-ui-components
Free Tailwind CSS UI Components - Crafted for modern websites, landing pages and web apps. TailGrids Core is free and open-source so, feel free to use with your personal or commercial projects. If you would like to show your support and love, don't forget to give us a star 🌟
Stars: ✭ 49 (+96%)
Mutual labels:  tailwind, tailwind-css
vuejs-tailwindcss-portfolio
A simple multipage and responsive Vue.js & Tailwind CSS portfolio theme with dark mode.
Stars: ✭ 100 (+300%)
Mutual labels:  tailwind, tailwind-css
notus-angular
Notus Angular: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 148 (+492%)
Mutual labels:  tailwind, tailwind-css
Twin.macro
🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: ✭ 5,137 (+20448%)
Mutual labels:  tailwind, tailwind-css
View All Similar Projects ➔

Tailwind CSS Background Extended Plugin

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

Installation

Add this plugin to your project:

# 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

// 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
  ],
}
.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; }
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].