feat(examples): add tailwind preset example

[jessicalynch]

Adds example for building a Tailwind preset from tokens.

Original PR: #1036

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[aws-amplify-us-west-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-1344.d16eby4ekpss5y.amplifyapp.com

[jorenbroekema]

Looks good in general, comments are pretty easy ones to address I think.

Thanks for taking the effort to rebase your earlier PR to SD v4 :) much appreciated.

[JamesIves]

@jessicalynch Is there anything I can help with here to move this along? Keen to use this functionality so I don't mind contributing some of the remaining PR feedback!

[jessicalynch]

@jessicalynch Is there anything I can help with here to move this along? Keen to use this functionality so I don't mind contributing some of the remaining PR feedback!

Hey, thanks, I should be able to push my updates this weekend. This is just an example, though, so feel free to use the pattern anytime!

[jorenbroekema]

Awesome job, just some final minor remarks, should be pretty easy to resolve. npx changeset locally with a minor bump would be appreciated, since this example is basically a new feature that would have to be released on NPM as well. If you're limited time-wise I can also resolve these things and wrap this PR up later this week, just let me know!

[jessicalynch]

Awesome job, just some final minor remarks, should be pretty easy to resolve. npx changeset locally with a minor bump would be appreciated, since this example is basically a new feature that would have to be released on NPM as well. If you're limited time-wise I can also resolve these things and wrap this PR up later this week, just let me know!

Done- thank you for all the feedback!

[jorenbroekema]

Sweet!

I've also forwarded the GH markdown issue to my GH contact and he contacted the team responsible for markdown parsing to html rendering for GH, they'll probably pick it up at some point.

I've also raised #1396 to make sure we change the old formats to using tabs for v5 major when we get to that.

[kaelig]

This example doesn't allow for alpha values to be passed.

Example: `bg-red/50' should have an opacity of 50% (documentation).

To do so, please add / <alpha-value> to the output.

Here's what the output should look like:

### themeColors.js

Tailwind theme color values that reference the plugin [css vars](https://tailwindcss.com/docs/customizing-colors#using-css-variables).

```js
export default {
	'sd-text-base': 'rgb(var(--sd-text-base) / <alpha-value>)',
	'sd-text-secondary': 'rgb(var(--sd-text-secondary) / <alpha-value>)',
	'sd-text-tertiary': 'rgb(var(--sd-text-tertiary) / <alpha-value>)',
	'sd-text-neutral': 'rgb(var(--sd-text-neutral))', // this one already has an opacity
	'sd-theme': 'rgb(var(--sd-theme) / <alpha-value>)',
	'sd-theme-light': 'rgb(var(--sd-theme-light) / <alpha-value>)',
	'sd-theme-dark': 'rgb(var(--sd-theme-dark) / <alpha-value>)',
	'sd-theme-secondary': 'rgb(var(--sd-theme-secondary) / <alpha-value>)',
	'sd-theme-secondary-dark': 'rgb(var(--sd-theme-secondary-dark) / <alpha-value>)',
	'sd-theme-secondary-light': 'rgb(var(--sd-theme-secondary-light) / <alpha-value>)',
};
```

[jessicalynch]

This example doesn't allow for alpha values to be passed.

Example: `bg-red/50' should have an opacity of 50% (documentation).

To do so, please add / <alpha-value> to the output.

Here's what the output should look like:

### themeColors.js

Tailwind theme color values that reference the plugin [css vars](https://tailwindcss.com/docs/customizing-colors#using-css-variables).

```js
export default {
	'sd-text-base': 'rgb(var(--sd-text-base) / <alpha-value>)',
	'sd-text-secondary': 'rgb(var(--sd-text-secondary) / <alpha-value>)',
	'sd-text-tertiary': 'rgb(var(--sd-text-tertiary) / <alpha-value>)',
	'sd-text-neutral': 'rgb(var(--sd-text-neutral))', // this one already has an opacity
	'sd-theme': 'rgb(var(--sd-theme) / <alpha-value>)',
	'sd-theme-light': 'rgb(var(--sd-theme-light) / <alpha-value>)',
	'sd-theme-dark': 'rgb(var(--sd-theme-dark) / <alpha-value>)',
	'sd-theme-secondary': 'rgb(var(--sd-theme-secondary) / <alpha-value>)',
	'sd-theme-secondary-dark': 'rgb(var(--sd-theme-secondary-dark) / <alpha-value>)',
	'sd-theme-secondary-light': 'rgb(var(--sd-theme-secondary-light) / <alpha-value>)',
};

Hm.. it's working for the text-* classes, but I see it's not working for bg-* classes... will have to look into that.

Edit: it's working for me for bg-classes, too... I tried bg-sd-text-neutral/50 first, but that specific value already has an alpha value defined in the token. I can do some more investigation, though. Are you trying with the default tailwind red palette and having an issue with bg-red/50?

[jessicalynch]

@kaelig, here's the tailwindcss reference I used- https://tailwindcss.com/docs/customizing-colors#using-css-variables

If using CSS variables, they suggest defining them as channels without the color space function:

  :root {
    --color-primary: 255 115 179;
    --color-secondary: 111 114 185;
  }

/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
  colors: {
    primary: 'rgb(var(--color-primary))',
    secondary: 'rgb(var(--color-secondary))',
  }
}
}

...but I do remember seeing that <alpha-value> syntax and originally had it in this PR...

I wasn't able to find it again in the docs and realized the modifiers worked without it, so I removed it:

[kaelig]

That's what I did at Netlify to enable support for the alpha modifier.

Does the opacity modifier now work without alpha-value in the theme?