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

Color closures #132

Merged
merged 2 commits into from
Aug 30, 2020
Merged

Color closures #132

merged 2 commits into from
Aug 30, 2020

Conversation

ben-rogerson
Copy link
Owner

This PR adds support for custom colors that work with tailwind opacity classes added in Tailwind v1.7.0.
You'll now be able to add custom colors to the tailwind config and then style their opacity with classes like text-opacity-50 / bg-opacity-50.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      custom: ({ opacityVariable }) =>
        `rgba(255, 255, 255, var(${opacityVariable}, 1))`,
    },
  },
}
// usage
tw`text-custom text-opacity-50`
// output
({
  "color": "rgba(255, 255, 255, var(--text-opacity, 1))",
  "--text-opacity": "0.5"
});

@ben-rogerson ben-rogerson mentioned this pull request Aug 27, 2020
6 tasks
@ben-rogerson ben-rogerson merged commit 93d00ae into master Aug 30, 2020
@ben-rogerson ben-rogerson deleted the feature/color-closures branch August 30, 2020 01:58
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