https://github.com/philippbosch/tailwindcss-colorize

https://github.com/philippbosch/tailwindcss-colorize

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/philippbosch/tailwindcss-colorize
• Owner: philippbosch
• Created: 2019-05-13T11:40:19.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-02-18T13:40:58.000Z (over 4 years ago)
• Last Synced: 2024-03-18T23:03:55.952Z (3 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/tailwindcss-colorize
• Size: 9.77 KB
• Stars: 10
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Lists

• awesome-tailwindcss - Colorize - Adds `filter` utilities. (Plugins)

README

        
# tailwindcss-colorize

A plugin for [Tailwind CSS](https://www.tailwindcss.com/) to colorize arbitrary

elements using CSS filters. The most popular use case is to colorize single-color

icons without altering the icon file directly.

See [this CodePen](https://codepen.io/sosuke/pen/Pjoqqp) for demo of the underlying method.

## Requirements

This plugin requires **Tailwind CSS v1.x**.

## Installation

```shell

npm install --save-dev tailwindcss-colorize

```

or

```shell

yarn add --dev tailwindcss-colorize

```

## Usage

In your _tailwind.config.js_:

```js

module.exports = {

  // …

  theme: {

    colorize: [

      // use any color defined in your theme, the following are taken from the default theme

      'gray-500',

      'teal-500',

    ]

  }

  plugins: [

    // …

    require("tailwindcss-colorize")

    // …

  ]

  // …

};

```

This would generate the following utility class:

```css

.colorize-gray-500 {

  -webkit-filter: invert(72%) sepia(39%) saturate(135%) hue-rotate(174deg) brightness(90%) contrast(86%);

  filter: invert(72%) sepia(39%) saturate(135%) hue-rotate(174deg) brightness(90%) contrast(86%);

}

.colorize-teal-500 {

  -webkit-filter: invert(77%) sepia(6%) saturate(4378%) hue-rotate(132deg) brightness(81%) contrast(78%);

  filter: invert(77%) sepia(6%) saturate(4378%) hue-rotate(132deg) brightness(81%) contrast(78%);

}

.blacken {

  -webkit-filter: brightness(0) saturate(100%);

  filter: brightness(0) saturate(100%);

}

```

And in your HTML you could use these classes like this:

```html



```

For this to work, the icon color needs to be black. If it is not, you can use 

the `.blacken` utility class that is also generated like this:

```html



  



```

## License

[MIT](https://philippbosch.mit-license.org/)