JSPM – tailwind-color-alpha@1.0.2

Package Exports

tailwind-color-alpha

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-color-alpha) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

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

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

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:

.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}