@coloradix/tailwindcss NPM

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);
}