benface / Tailwindcss Filters
Licence: isc
Tailwind CSS plugin to generate filter and backdrop filter utilities
Stars: ✭ 150
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Tailwindcss Filters
Goodwork
Self hosted project management and collaboration tool powered by TALL stack
Stars: ✭ 1,730 (+1053.33%)
Mutual labels: tailwindcss
Components
Fully responsive and beautiful HTML components made with VueJS and TailwindCSS.
Stars: ✭ 121 (-19.33%)
Mutual labels: tailwindcss
Wp Tailwind
A WordPress starter theme that utilizes Tailwind + PurgeCSS.
Stars: ✭ 135 (-10%)
Mutual labels: tailwindcss
Vue Notus
Vue Notus: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 108 (-28%)
Mutual labels: tailwindcss
Eleventy Starter
ARCHIVED: An Eleventy starting point with Tailwind and Svelte preconfigured.
Stars: ✭ 118 (-21.33%)
Mutual labels: tailwindcss
Fama
TailwindCSS based personal branding template. Built with react and framer-motion
Stars: ✭ 121 (-19.33%)
Mutual labels: tailwindcss
Sapper Firebase Typescript Graphql Tailwindcss Actions Template
A template that includes Sapper for Svelte, Firebase functions and hosting, TypeScript and TypeGraphQL, Tailwind CSS, ESLint, and automatic building and deployment with GitHub Actions
Stars: ✭ 111 (-26%)
Mutual labels: tailwindcss
Sage
WordPress starter theme with a modern development workflow
Stars: ✭ 11,531 (+7587.33%)
Mutual labels: tailwindcss
Todolist Frontend Vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
Stars: ✭ 120 (-20%)
Mutual labels: tailwindcss
Vue Telescope Analyzer
Detect Vue technologies running on a website ✨
Stars: ✭ 117 (-22%)
Mutual labels: tailwindcss
Tailwindcss Rtl
Enabling bidirectional support on tailwindcss framework
Stars: ✭ 118 (-21.33%)
Mutual labels: tailwindcss
Codrops Libre
A reponsive single page app template for collection management projects
Stars: ✭ 124 (-17.33%)
Mutual labels: tailwindcss
React Native Design Utility
Utility for building design system in react-native. Idea from TailwindCSS
Stars: ✭ 116 (-22.67%)
Mutual labels: tailwindcss
11st Starter Kit
11ty, powered by Snowpack with Tailwind CSS and Alpine.js.
Stars: ✭ 141 (-6%)
Mutual labels: tailwindcss
Jet
It‘s (j)ust (e)leventy and (t)ailwind … OK, and a few other things; it‘s still *really* small though.
Stars: ✭ 111 (-26%)
Mutual labels: tailwindcss
Dato.rss
The best RSS Search experience you can find
Stars: ✭ 122 (-18.67%)
Mutual labels: tailwindcss
React Laravel Boilerplate
A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting
Stars: ✭ 146 (-2.67%)
Mutual labels: tailwindcss
Notus Svelte
Notus Svelte: Free Tailwind CSS UI Kit and Admin
Stars: ✭ 144 (-4%)
Mutual labels: tailwindcss
Xstyled
A utility-first CSS-in-JS framework built for React. 💅👩🎤⚡️
Stars: ✭ 1,835 (+1123.33%)
Mutual labels: tailwindcss
BLACK LIVES MATTER
Be aware. Be angry. Do better. Demand change. Show your support any way you can. Click on the link above to find protests, petitions, and other ways to help. DO NOT LET IT GO SILENT.
Filters Plugin for Tailwind CSS
Requirements
This plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (npm install [email protected]
).
Installation
npm install tailwindcss-filters
Usage
// tailwind.config.js
module.exports = {
theme: {
filter: { // defaults to {}
'none': 'none',
'grayscale': 'grayscale(1)',
'invert': 'invert(1)',
'sepia': 'sepia(1)',
},
backdropFilter: { // defaults to {}
'none': 'none',
'blur': 'blur(20px)',
},
},
variants: {
filter: ['responsive'], // defaults to ['responsive']
backdropFilter: ['responsive'], // defaults to ['responsive']
},
plugins: [
require('tailwindcss-filters'),
],
};
This plugin generates the following utilities:
/* configurable with the "filter" theme object */
.filter-[key] {
filter: [value];
}
/* configurable with the "backdropFilter" theme object */
.backdrop-[key] {
backdrop-filter: [value];
}
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].