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.

Sign up for GitHub

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

Remove <alpha-value> from docs #1868

Merged
merged 2 commits into from
Sep 3, 2024
Merged

Remove <alpha-value> from docs #1868

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f2aacff
Remove <alpha-value> from docs
adamwathan Sep 3, 2024
fd73294
Update src/pages/docs/customizing-colors.mdx
adamwathan Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions src/pages/docs/customizing-colors.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,24 +373,24 @@ If you'd like to define your colors as CSS variables, you'll need to define thos
}
```

Then define your colors in your configuration file, being sure to include the color space you're using, and the special `<alpha-value>` placeholder that Tailwind will use to inject the alpha value when using an opacity modifier:
Then define your colors in your configuration file, being sure to include the color space you're using and a default alpha value for color spaces like `rgba` where the alpha channel is required:

```js {{ filename: 'tailwind.config.js' }}
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
// Using modern `rgb`
primary: 'rgb(var(--color-primary) / <alpha-value>)',
secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
primary: 'rgb(var(--color-primary))',
secondary: 'rgb(var(--color-secondary))',

// Using modern `hsl`
primary: 'hsl(var(--color-primary) / <alpha-value>)',
secondary: 'hsl(var(--color-secondary) / <alpha-value>)',
primary: 'hsl(var(--color-primary))',
secondary: 'hsl(var(--color-secondary))',

// Using legacy `rgba`
primary: 'rgba(var(--color-primary), <alpha-value>)',
secondary: 'rgba(var(--color-secondary), <alpha-value>)',
primary: 'rgba(var(--color-primary), 1)',
secondary: 'rgba(var(--color-secondary), 1)',
}
}
}
Expand All @@ -405,13 +405,13 @@ When defining your colors this way, make sure that the format of your CSS variab

@layer base {
:root {
/* For rgb(255 115 179 / <alpha-value>) */
/* For rgb(255 115 179 / 1) */
--color-primary: 255 115 179;

/* For hsl(198deg 93% 60% / <alpha-value>) */
--color-primary: 198deg 93% 60%;
/* For hsl(333deg 100% 73% / 1) */
--color-primary: 333deg 100% 73%;

/* For rgba(255, 115, 179, <alpha-value>) */
/* For rgba(255, 115, 179, 1) */
--color-primary: 255, 115, 179;
}
}
Expand Down