@fusoionic/ng-tailwind-color
TypeScript icon, indicating that this package has built-in type declarations

1.3.1 • Public • Published

Angular Tailwind Color Helpers/Pipes

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

NPM Version Package License NPM Downloads Package Size

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

Package Sidebar

Install

npm i @fusoionic/ng-tailwind-color

Weekly Downloads

1

Version

1.3.1

License

GPL-3.0

Unpacked Size

284 kB

Total Files

33

Last publish

Collaborators

  • marxlnfcs