use tailwind @source inline

[jmilljr24]

What is the goal of this PR and why is this important?

Tailwind only generates classes detected in source files. We build classes dynamically.

How did you approach the change?

This uses tailwinds @source inline to generate the range of background colors defined domain_theme.rb. The downside to this is that many colors generate by be unused so technically the css will be a larger file than necessary but with a limited number of colors defines I don't see it as a major issue. The alternative is to limit the "shades" of colors we want to build dynamically.

This function can be used for other styles like text color but would require a new source definition.

Anything else to add?

Example of generated colors for bg-rose-*

--color-rose-100: oklch(94.1% .03 12.58);
--color-rose-200: oklch(89.2% .058 10.001);
--color-rose-300: oklch(81% .117 11.638);
--color-rose-400: oklch(71.2% .194 13.428);
--color-rose-50: oklch(96.9% .015 12.422);
--color-rose-500: oklch(64.5% .246 16.439);
--color-rose-600: oklch(58.6% .253 17.585);
--color-rose-700: oklch(51.4% .222 16.935);
--color-rose-800: oklch(45.5% .188 13.697);
--color-rose-900: oklch(41% .159 10.272);
--color-rose-950: oklch(27.1% .105 12.094)

[maebeale]

Woohoo! I swear I tried something like this before. Thanks for figuring it out!