Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add slash alpha #485

Merged
merged 1 commit into from
Jul 28, 2021
Merged

Add slash alpha #485

merged 1 commit into from
Jul 28, 2021

Conversation

ben-rogerson
Copy link
Owner

This PR adds the slash alpha syntax which gives you a super quick way to set the alpha on colors.

import tw from "twin.macro";

// Use an opacity from your tailwind config by including it after the forward slash
tw`text-red-500/25`

// Use a custom alpha value by surrounding it with square brackets
tw`text-red-500/[.555]`

// Use a css variable using var within the square brackets
tw`text-red-500/[var(--myvar)]`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "color": "rgba(239, 68, 68, 0.25)"
});

({
  "color": "rgba(239, 68, 68, .555)"
});

({
  "color": "rgba(239, 68, 68, var(--myvar))"
});

The slash alpha feature works with these types of classes:

  • tw`placeholder-red-500/25`
  • tw`bg-red-500/25`
  • tw`from-red-500/25`
  • tw`via-red-500/25`
  • tw`to-red-500/25`
  • tw`border-red-500/25`
  • tw`ring-red-500/25`
  • tw`ring-offset-red-500/25`
  • tw`text-red-500/25`
  • tw`stroke-red-500/25` (with tailwind.config adjustment: stroke: theme => theme('colors'),
  • tw`fill-red-500/25` (with tailwind.config adjustment: fill: theme => theme('colors'),

@ben-rogerson ben-rogerson mentioned this pull request Jul 25, 2021
13 tasks
@ben-rogerson ben-rogerson merged commit e5bf8be into master Jul 28, 2021
@ben-rogerson ben-rogerson deleted the feature/slash-alpha branch July 28, 2021 05:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant