@fusoionic/ng-tailwind-color

Angular Tailwind Color Helpers/Pipes

Angular helper functions/pipe for coloring (build on top of TinyColor2)

Installation

npm i @fusoionic/ng-tailwind-color

Usage

Module:

Import TailwindModule from @fusoionic/ng-tailwind-color

import { TailwindModule } from '@fusoionic/ng-tailwind-color';

@NgModule({
  imports: [
    TailwindModule.forRoot({ ... }), // inject services
    TailwindModule, // inject pipes
  ]
})

Resolve color

Resolve color with pipe

<!-- Tailwind string -->
<span [style.color]="'red-500' | twHex"></span>

<!-- Tailwind string with alpha/opacity -->
<span [style.color]="'red-500/50' | twRgb"></span> <!-- 50 = 0.5 -->

import {TailwindService} from '@fusoionic/ng-tailwind-color';

export class AppComponent implements OnInit {
  constructor(
    private twService: TailwindService,
  ){}

  ngOnInit(){
    this.twService.resolve('red-500').darken(50).toHex();
  }
}

Available Pipes

twHex - Resolves color to HEX
twRgb - Resolves color to RGBA
twHsl - Resolves color to HSL
twHsv - Resolves color to HSV

twInvertHex - Inverts color and returns it as HEX
twInvertRgb - Inverts color and returns it as RGBA
twInvertHsl - Inverts color and returns it as HSL
twInvertHsv - Inverts color and returns it as HSV

twLightenHex - Lightens color by given amount and returns it as HEX
twLightenRgb - Lightens color by given amount and returns it as RGBA
twLightenHsl - Lightens color by given amount and returns it as HSL
twLightenHsv - Lightens color by given amount and returns it as HSV

twDarkenHex - Darkens color by given amount and returns it as HEX
twDarkenRgb - Darkens color by given amount and returns it as RGBA
twDarkenHsl - Darkens color by given amount and returns it as HSL
twDarkenHsv - Darkens color by given amount and returns it as HSV