Remix.run Logo
fouronnes3 5 days ago

Very cool project. I don't use tailwind but I have been thinking that the color palette part is great. Love that you can export it all to a big list of CSS variables.

seanwilson 5 days ago | parent [-]

Thanks! To clarify, it's aimed at more than just Tailwind, but Tailwind popularized the color naming like red-500, blue-100, green-900 etc. so I went with that convention.

You can use the CSS export in regular CSS projects directly e.g. via `color: var(--red-900)`, or something like `--bs-danger: var(--red-500)` for Bootstrap projects with semantic naming. The same export format works for Tailwind too because since version 4, Tailwind is mostly configured via CSS variables now.

I probably need to make this more obvious, but if all your swatches have the linked/shared lightness option set, you can pick lightnesses where all grade 500 colors contrast against all grade 100 colors, all grade 600 colors contrast against all grade 200 colors etc. so when you're picking colors in CSS, you know by design which colors will contrast without having to go check them.