# tailwind-color-alpha

> Automatic alpha variants for your Tailwind CSS colors based on your opacity config

Latest version **1.0.4** (published 2020-03-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install tailwind-color-alpha
pnpm add tailwind-color-alpha
yarn add tailwind-color-alpha
bun add tailwind-color-alpha
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2020-03-28 |
| First published | 2020-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 5.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Swann Polydor |
| Maintainers | soueuls |
| Keywords | tailwind, tailwindcss, plugin, tailwindcss-plugin, css, alpha |

## Links

- npm: https://www.npmjs.com/package/tailwind-color-alpha
- Repository: https://github.com/soueuls/tailwind-color-alpha
- Homepage: https://github.com/soueuls/tailwind-color-alpha#readme
- Issues: https://github.com/soueuls/tailwind-color-alpha/issues
- npm.io page: https://npm.io/package/tailwind-color-alpha

## Dependencies (1)

- [color](https://npm.io/package/color.md) ^3.1.2

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2020-03-28
- 1.0.3 — 2020-03-28
- 1.0.2 — 2020-03-07
- 1.0.1 — 2020-03-07
- 1.0.0 — 2020-03-06

## README

> Automatic alpha variants for your Tailwind CSS colors based on your opacity config

## Why?

Tailwind only supports opacity but sometimes you need to apply semi-transparent background/border or text.

You could tweak your Tailwind configuration like this

```javascript
module.exports = {
  theme: {
    colors: {
      primary: "#2b2e4a",
      "primary-10": "rgba(43,46,74, 0.1)",
      "primary-20": "rgba(43,46,74, 0.2)",
      "primary-75": "rgba(43,46,74, 0.75)"
      // ...
    }
    // ...
  }
};
```

But it's repetitive, confusing and error prone. We can do better.

## Install

`npm install --save-dev tailwind-color-alpha`

```javascript
module.exports = {
  // ...
  plugins: [require("tailwind-color-alpha")()]
};
```

The plugin will automatically use your colors and opacity config to generate all the corresponding rgba values

## Examples

```javascript
module.exports = {
  theme: {
    colors: {
      primary: "#2b2e4a",
      red: {
        default: "#e84545",
        darker: "#903749"
      }
    },
    opacity: {
      "25": ".25",
      "50": "0.5",
      "75": "0.75"
    }
  }
};
```

The configuration above yields the following utilities:

```css
.bg-primary-alpha-25 {
  background-color: rgba(43, 46, 74, 0.25);
}
.bg-primary-alpha-50 {
  background-color: rgba(43, 46, 74, 0.5);
}
.bg-primary-alpha-75 {
  background-color: rgba(43, 46, 74, 0.75);
}

.bg-red-alpha-25 {
  background-color: rgba(232, 69, 69, 0.25);
}
.bg-red-alpha-50 {
  background-color: rgba(232, 69, 69, 0.5);
}
.bg-red-alpha-75 {
  background-color: rgba(232, 69, 69, 0.75);
}

.bg-red-darker-alpha-25 {
  background-color: rgba(144, 55, 73, 0.25);
}
.bg-red-darker-alpha-50 {
  background-color: rgba(144, 55, 73, 0.5);
}
.bg-red-darker-alpha-75 {
  background-color: rgba(144, 55, 73, 0.75);
}
```

Notice that a color named `red.default` will end up generating `text-red` and so we follow Tailwind's convention with `bg-red-alpha-${opacity}`

---
_Source: https://npm.io/package/tailwind-color-alpha · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._