npmpackage.info

Gathering detailed insights and metrics for tw-harmony

Other packages similar to tw-harmony

@lazy-cjk/regexp-range-table

1.0.8

regexp-cjk-with-plugin-enabled

1.0.22

zhRegExp from all plugin enabled with unsafe options

tw-harmony

Harmony color palette for Tailwind CSS

0.5.3

MIT

TypeScript

3.85 kB

2,942

Installations

npm install tw-harmony

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

20.8.0

NPM Version

10.1.0 Score

70.2

Supply Chain

86.4

Quality

76.1

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 1 contributors

Languages

TypeScript

JavaScript

TypeScript (52.74%)

JavaScript (47.26%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

brc-dd

Download Statistics

Total Downloads

2,942

Last Day

Last Week

Last Month

Last Year

517

GitHub Statistics

2 Stars

45 Commits

1 Watching

1 Branches

1 Contributors

Bundle Size

23.63 kB

Minified

3.85 kB

Minified + Gzipped

Bundlephobia

Sponsor this package

https://github.com/sponsors/brc-dd

Maintainers

Package Meta Information

Latest Version

0.5.3

Package Id

tw-harmony@0.5.3

Unpacked Size

52.27 kB

Size

6.87 kB

File Count

NPM Version

10.1.0

Node Version

20.8.0

Publised On

07 Oct 2023

Total Downloads

Cumulative downloads

Total Downloads

2,942

Last day

-90.9%

Compared to previous day

Last week

-77.1%

Compared to previous week

Last month

1,580%

Compared to previous month

Last year

-78.7%

517

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

@types/culori @types/node culori release-it tsup typescript

Versions

tw-Harmony

A Tailwind CSS port of the Harmony color palette.

Installation

1npm add -D tw-harmony

Usage

1// tailwind.config.ts
2import type { Config } from 'tailwindcss'
3import { colors } from 'tw-harmony'
4
5export default {
6  theme: {
7    colors: colors()
8  }
9} satisfies Config

Notes

Compatibility

For this to work properly on not-so-modern browsers, you'll need to add @csstools/postcss-oklab-function plugin to your PostCSS config:

1npm add -D @csstools/postcss-oklab-function

1// postcss.config.js
2import tailwindcss from 'tailwindcss'
3import oklab from '@csstools/postcss-oklab-function'
4import autoprefixer from 'autoprefixer'
5
6export default {
7  plugins: [tailwindcss(), oklab({ preserve: true }), autoprefixer()]
8}

Non-PostCSS setups like Lightning CSS, the oxide engine, Tailwind CLI, Play CDN, Tailwind Play, etc. don't properly generate fallbacks. So, you'll need to call the color method with the legacy option set to true:

1export default {
2  theme: {
3    colors: colors({ legacy: true })
4  }
5}

IntelliSense

You'll get IntelliSense and color previews in VS Code without any additional setup. Just make sure you have the Tailwind CSS IntelliSense extension installed. No setup is required for JetBrains IDEs either.

Note that, there might be slight differences between the generated previews and the actual colors as the colors shown in previews are transformed to sRGB.

License

MIT

Used Harmony color palette is licensed under CC BY 4.0 by Evil Martians.

No vulnerabilities found.

No security vulnerabilities found.