@coloradix/tailwindcss
v2.3.2
Published
Coloradix for tailwindcss
Downloads
76
Maintainers
Readme
coloradix tailwindcss
coloradix integrations for TailwindCSS
Features
- Choose only the colors you need
- Light & Dark mode with data attribute
data-theme="{light|dark}"
- Color alias with data attribute
data-alias-{name}="{color}"
- Optional overlay colors (black and white)
- Support tailwindcss opacity modifier
bg-{alias}-{shade}/{opacity}
Installation
npm install -D @coloradix/tailwindcss
# or
yarn add -D @coloradix/tailwindcss
# or
pnpm add -D @coloradix/tailwindcss
Usage
Typescript Config (Typescript)
import type { Config } from "tailwindcss";
import coloradix, { gray, red, green, blue } from "@coloradix/tailwindcss";
const radix = coloradix({
gray,
red,
green,
blue,
})
.alias({
neutral: "gray" /** fixed color */,
primary: ["red", "green", "blue"] /** dynamic color, first element of array used as main color */,
})
.build();
export default {
theme: {
colors: radix.colors,
},
plugins: [radix.plugin],
} satisfies Config;
Alias will be used as tailwind colors
<div class="bg-black text-white">
<div class="bg-neutral-3 text-neutral-11">coloradix</div>
<div class="bg-primary-3 text-primary-11">tailwindcss</div>
</div>
Expected output, will be added to tailwind base layer
:root,
[data-theme="light"] {
--gray-1: 252 252 252;
--gray-2: 249 249 249;
--gray-3: 240 240 240;
--gray-4: 232 232 232;
--gray-5: 224 224 224;
--gray-6: 217 217 217;
--gray-7: 206 206 206;
--gray-8: 187 187 187;
--gray-9: 141 141 141;
--gray-10: 131 131 131;
--gray-11: 100 100 100;
--gray-12: 32 32 32;
--red-1: 255 252 252;
--red-2: 255 247 247;
--red-3: 254 235 236;
--red-4: 255 219 220;
--red-5: 255 205 206;
--red-6: 253 189 190;
--red-7: 244 169 170;
--red-8: 235 142 144;
--red-9: 229 72 77;
--red-10: 220 62 66;
--red-11: 206 44 49;
--red-12: 100 23 35;
--green-1: 251 254 252;
--green-2: 244 251 246;
--green-3: 230 246 235;
--green-4: 214 241 223;
--green-5: 196 232 209;
--green-6: 173 221 192;
--green-7: 142 206 170;
--green-8: 91 185 139;
--green-9: 48 164 108;
--green-10: 43 154 102;
--green-11: 33 131 88;
--green-12: 25 59 45;
--blue-1: 251 253 255;
--blue-2: 244 250 255;
--blue-3: 230 244 254;
--blue-4: 213 239 255;
--blue-5: 194 229 255;
--blue-6: 172 216 252;
--blue-7: 142 200 246;
--blue-8: 94 177 239;
--blue-9: 0 144 255;
--blue-10: 5 136 240;
--blue-11: 13 116 206;
--blue-12: 17 50 100;
}
[data-theme="dark"] {
--gray-1: 17 17 17;
--gray-2: 25 25 25;
--gray-3: 34 34 34;
--gray-4: 42 42 42;
--gray-5: 49 49 49;
--gray-6: 58 58 58;
--gray-7: 72 72 72;
--gray-8: 96 96 96;
--gray-9: 110 110 110;
--gray-10: 123 123 123;
--gray-11: 180 180 180;
--gray-12: 238 238 238;
--red-1: 25 17 17;
--red-2: 32 19 20;
--red-3: 59 18 25;
--red-4: 80 15 28;
--red-5: 97 22 35;
--red-6: 114 35 45;
--red-7: 140 51 58;
--red-8: 181 69 72;
--red-9: 229 72 77;
--red-10: 236 93 94;
--red-11: 255 149 146;
--red-12: 255 209 217;
--green-1: 14 21 18;
--green-2: 18 27 23;
--green-3: 19 45 33;
--green-4: 17 59 41;
--green-5: 23 73 51;
--green-6: 32 87 62;
--green-7: 40 104 74;
--green-8: 47 124 87;
--green-9: 48 164 108;
--green-10: 51 176 116;
--green-11: 61 214 140;
--green-12: 177 241 203;
--blue-1: 13 21 32;
--blue-2: 17 25 39;
--blue-3: 13 40 71;
--blue-4: 0 51 98;
--blue-5: 0 64 116;
--blue-6: 16 77 135;
--blue-7: 32 93 158;
--blue-8: 40 112 189;
--blue-9: 0 144 255;
--blue-10: 59 158 255;
--blue-11: 112 184 255;
--blue-12: 194 230 255;
}
:root {
--neutral-1: var(--gray-1);
--neutral-2: var(--gray-2);
--neutral-3: var(--gray-3);
--neutral-4: var(--gray-4);
--neutral-5: var(--gray-5);
--neutral-6: var(--gray-6);
--neutral-7: var(--gray-7);
--neutral-8: var(--gray-8);
--neutral-9: var(--gray-9);
--neutral-10: var(--gray-10);
--neutral-11: var(--gray-11);
--neutral-12: var(--gray-12);
}
:root,
[data-alias-primary="red"] {
--primary-1: var(--red-1);
--primary-2: var(--red-2);
--primary-3: var(--red-3);
--primary-4: var(--red-4);
--primary-5: var(--red-5);
--primary-6: var(--red-6);
--primary-7: var(--red-7);
--primary-8: var(--red-8);
--primary-9: var(--red-9);
--primary-10: var(--red-10);
--primary-11: var(--red-11);
--primary-12: var(--red-12);
}
[data-alias-primary="green"] {
--primary-1: var(--green-1);
--primary-2: var(--green-2);
--primary-3: var(--green-3);
--primary-4: var(--green-4);
--primary-5: var(--green-5);
--primary-6: var(--green-6);
--primary-7: var(--green-7);
--primary-8: var(--green-8);
--primary-9: var(--green-9);
--primary-10: var(--green-10);
--primary-11: var(--green-11);
--primary-12: var(--green-12);
}
[data-alias-primary="blue"] {
--primary-1: var(--blue-1);
--primary-2: var(--blue-2);
--primary-3: var(--blue-3);
--primary-4: var(--blue-4);
--primary-5: var(--blue-5);
--primary-6: var(--blue-6);
--primary-7: var(--blue-7);
--primary-8: var(--blue-8);
--primary-9: var(--blue-9);
--primary-10: var(--blue-10);
--primary-11: var(--blue-11);
--primary-12: var(--blue-12);
}
:root {
--black-1: rgba(0, 0, 0, 0.05);
--black-2: rgba(0, 0, 0, 0.1);
--black-3: rgba(0, 0, 0, 0.15);
--black-4: rgba(0, 0, 0, 0.2);
--black-5: rgba(0, 0, 0, 0.3);
--black-6: rgba(0, 0, 0, 0.4);
--black-7: rgba(0, 0, 0, 0.5);
--black-8: rgba(0, 0, 0, 0.6);
--black-9: rgba(0, 0, 0, 0.7);
--black-10: rgba(0, 0, 0, 0.8);
--black-11: rgba(0, 0, 0, 0.9);
--black-12: rgba(0, 0, 0, 0.95);
--white-1: rgba(255, 255, 255, 0.05);
--white-2: rgba(255, 255, 255, 0.1);
--white-3: rgba(255, 255, 255, 0.15);
--white-4: rgba(255, 255, 255, 0.2);
--white-5: rgba(255, 255, 255, 0.3);
--white-6: rgba(255, 255, 255, 0.4);
--white-7: rgba(255, 255, 255, 0.5);
--white-8: rgba(255, 255, 255, 0.6);
--white-9: rgba(255, 255, 255, 0.7);
--white-10: rgba(255, 255, 255, 0.8);
--white-11: rgba(255, 255, 255, 0.9);
--white-12: rgba(255, 255, 255, 0.95);
}