proto-tailwindcss-clrs v0.0.332
Custom Colors for Tailwind CSS
This plugin allows you to quickly generate color classes for Tailwind CSS.
Requirements
This plugin requires Tailwind CSS 2.2.2 or later.
Installation
yarn add proto-tailwindcss-clrs
Usage
Add the plugin in your tailwind.config.js
.
// tailwind.config.js
module.exports = {
plugins: [
// Generates colors for very specific CSS variables
require('proto-tailwindcss-clrs')({}),
],
};
The default configuration generates colors which use the following CSS variables:
#app {
--clrs-navy: #001f3f;
--clrs-blue: #0074d9;
--clrs-aqua: #7fdbff;
--clrs-teal: #39cccc;
--clrs-olive: #3d9970;
--clrs-green: #2ecc40;
--clrs-lime: #01ff70;
--clrs-yellow: #ffdc00;
--clrs-orange: #ff851b;
--clrs-red: #ff4136;
--clrs-maroon: #85144b;
--clrs-fuchsia: #f012be;
--clrs-purple: #b10dc9;
--clrs-black: #111111;
--clrs-gray: #aaaaaa;
--clrs-silver: #dddddd;
}
This plugin by default generates the equivalent of the following:
theme: {
extend: {
colors: {
'clrs-navy': 'var(--clrs-navy, #001f3f)',
'clrs-blue': 'var(--clrs-blue, #0074d9)',
'clrs-aqua': 'var(--clrs-aqua, #7fdbff)',
'clrs-teal': 'var(--clrs-teal, #39cccc)',
'clrs-olive': 'var(--clrs-olive, #3d9970)',
'clrs-green': 'var(--clrs-green, #2ecc40)',
'clrs-lime': 'var(--clrs-lime, #01ff70)',
'clrs-yellow': 'var(--clrs-yellow, #ffdc00)',
'clrs-orange': 'var(--clrs-orange, #ff851b)',
'clrs-red': 'var(--clrs-red, #ff4136)',
'clrs-maroon': 'var(--clrs-maroon, #85144b)',
'clrs-fuchsia': 'var(--clrs-fuchsia, #f012be)',
'clrs-purple': 'var(--clrs-purple, #b10dc9)',
'clrs-black': 'var(--clrs-black, #111111)',
'clrs-gray': 'var(--clrs-gray, #aaaaaa)',
'clrs-silver': 'var(--clrs-silver, #dddddd)',
}
Which you can then use in your HTML like this:
<div class="text-clrs-navy">
I'm a div with a height of 10 pixels or pickles depending on how you pronounce it.
</div>
This plugin extends the colors in Tailwind, so these new colors can be used anywhere that colors are normally used in Tailwind...
Options
The default use case supports the following option properties:
- prefix - the prefix string used for all colors
- map - an object of base color names & default values
- alphas - an array of 2 digit numbers (ie. 10-99)
This primary use case generates color definitions with both a css var and a fallback value.
Alternately, if you only want to define color defintions which require css vars, you can use the following option properties:
- prefix - the prefix string used for all colors
- names - an array of base color names
- extras - an array of extra color names
- variants - an array of variant names
- skip - an array of color names which won't have variants
The default base colors names & values where generated from clrs.cc.
example 1
require('proto-tailwindcss-clrs')({
prefix: 'ds1',
map: {
primary: '#f00',
secondary: '#00f',
},
})
this configuration generates the following color classes:
ds1-primary
ds1-secondary
and those are defined by the following colors:
var(--ds1-primary, #f00)
var(--ds1-secondary, #00f)
example 2
require('proto-tailwindcss-clrs')({
names: ['funky']
})
this configuration generates a single color class:
clrs-funky
which requires the following CSS variable:
--clrs-funky
example 3
require('proto-tailwindcss-clrs')({
prefix: 'ds1',
names: ['primary', 'secondary'],
variants: ['light', 'dark']
})
this configuration generates the following color classes:
ds1-primary
ds1-primary-light
ds1-primary-dark
ds1-secondary
ds1-secondary-light
ds1-secondary-dark
and those use the following CSS variables:
--ds1-primary
--ds1-primary-light
--ds1-primary-dark
--ds1-secondary
--ds1-secondary-light
--ds1-secondary-dark
References
- clrs.cc - A nicer color palette for the web.
9 days ago
10 days ago
12 days ago
16 days ago
17 days ago
18 days ago
18 days ago
19 days ago
24 days ago
27 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
5 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
5 months ago
5 months ago
5 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
11 months ago
12 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago