All Projects → javisperez → Tailwindcolorshades

javisperez / Tailwindcolorshades

Licence: mit
Color shades generator for TailwindCSS - https://javisperez.github.io/tailwindcolorshades

Projects that are alternatives of or similar to Tailwindcolorshades

Tooltip Sequence
A simple step by step tooltip helper for any site
Stars: ✭ 287 (-16.81%)
Mutual labels:  helper
Bullet
🚅 Interactive prompts made simple. Build a prompt like stacking blocks.
Stars: ✭ 3,257 (+844.06%)
Mutual labels:  colors
Gridsome Portfolio Starter
A simple portfolio theme for Gridsome powered by Tailwind CSS v1
Stars: ✭ 329 (-4.64%)
Mutual labels:  tailwindcss
Sapper Ecommerce
Svelte ecommerce - Headless, Authentication, Cart & Checkout, TailwindCSS, Server Rendered, Proxy + API Integrated, Animations, Stores, Lazy Loading, Loading Indicators, Carousel, Instant Search, Faceted Filters, 1 command deploy to production, Open Source, MIT license. Join us as contributor ([email protected])
Stars: ✭ 289 (-16.23%)
Mutual labels:  tailwindcss
Ansi Colors
Easily add ANSI colors to your text and symbols in the terminal. ansi-colors is the official ansi styling library for gulp, and is used by hundreds of other projects, including mocha and enquirer.
Stars: ✭ 300 (-13.04%)
Mutual labels:  colors
Pastel
A command-line tool to generate, analyze, convert and manipulate colors
Stars: ✭ 3,742 (+984.64%)
Mutual labels:  colors
Ekko
Framework agnostic PHP package for marking navigation items active.
Stars: ✭ 275 (-20.29%)
Mutual labels:  helper
Image Palette
Generate a WCAG compliant color theme from any image
Stars: ✭ 331 (-4.06%)
Mutual labels:  colors
Laravel Form Components
A set of Blade components to rapidly build forms with Tailwind CSS (v1.0 and v2.0) and Bootstrap 4. Supports validation, model binding, default values, translations, Laravel Livewire, includes default vendor styling and fully customizable!
Stars: ✭ 295 (-14.49%)
Mutual labels:  tailwindcss
Tall Forms
Laravel Livewire (TALL-stack) form generator with realtime validation, file uploads, array fields, blade form input components and more.
Stars: ✭ 321 (-6.96%)
Mutual labels:  tailwindcss
Senparc.co2net
支持 .NET Framework & .NET Core 的公共基础扩展库
Stars: ✭ 289 (-16.23%)
Mutual labels:  helper
Costumekit
Base types for theming an app.
Stars: ✭ 300 (-13.04%)
Mutual labels:  colors
React Color Extractor
A React component which extracts colors from an image
Stars: ✭ 314 (-8.99%)
Mutual labels:  colors
Kickoff tailwind
A rapid Rails 6 application template for personal use bundled with Tailwind CSS
Stars: ✭ 287 (-16.81%)
Mutual labels:  tailwindcss
Lavalamp
A text editor theme that visually differentiates languages.
Stars: ✭ 328 (-4.93%)
Mutual labels:  colors
Rex
Your RegEx companion.
Stars: ✭ 283 (-17.97%)
Mutual labels:  helper
Tailwindcss Classnames
TypeScript support for TailwindCSS
Stars: ✭ 305 (-11.59%)
Mutual labels:  tailwindcss
Typed.tw
Brings types to TailwindCSS via TypeScript.
Stars: ✭ 340 (-1.45%)
Mutual labels:  tailwindcss
Nord Dircolors
An arctic, north-bluish clean and elegant dircolors theme.
Stars: ✭ 328 (-4.93%)
Mutual labels:  colors
Babel Plugin Tailwind Components
Use Tailwind with any CSS-in-JS library
Stars: ✭ 320 (-7.25%)
Mutual labels:  tailwindcss

Color shades generators for TailwindCSS

CircleCI branch

To use this app

Go to https://javisperez.github.io/tailwindcolorshades

What is this?

Is a tool to make shades and tints for a given color and generate the proper code for the TailwindCSS config file.

The idea is to make the custom color generation a bit easier when creating custom color variants to use in your app's CSS.

How to use it

Just place a name and a color on the inputs and will generate 5 tints (50, 100, 200, 300, 400) and 4 shades (600, 700, 800, 900) for that given color. An automatic name generation will be used for the css class names but you can rename them at anytime.

After that you can copy/paste the generated colors into your Tailwind config file and start using them in your css.

Contributions

Feel free to fork this repo and send any Pull Request you want, every help is very much welcome :)

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].