调色板生成器

快速生成 尾风 颜色调色板来自底色或颜色.

演示 二. 支助 关键特性 二. 支助 安装 二. 支助 使用量 二. 支助 实例

演示

交互式 演示 生成尾风调色板

关键特性

• 生成小于十六进制值的调色板( N) 见示例 (中文(简体) )
• 生成多色调色板( E) 见示例 (中文(简体) )
• 自定义调色板阴影名称和亮度( L) 见示例 (中文(简体) )
• 自动应用或可覆盖的默认颜色命名( N) 见示例 (中文(简体) )
• 0) 依赖关系
• 字体支持
• 保留应用颜色

安装

npm i @bobthered/tailwindcss-palette-generator

选项

这个 tailwindcssPaletteGenerator() 函数只收到一个参数.

使用量

示例 - 基础

// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator('#FF0040')
        }
    },
    plugins: []
};

示例 - 多颜色

// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator(['#FF0040', '#FFBB00'])
        }
    },
    plugins: []
};

示例 - 自定义阴影和亮度

// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator({
                colors: ['#FF0040'],
                shades: [
                    { name: 'light', lightness: 95 },
                    { name: 'normal', lightness: 46 },
                    { name: 'dark', lightness: 7 }
                ]
            })
        }
    },
    plugins: []
};

示例 - 覆盖颜色名称

// tailwind.config.js
import { tailwindcssPaletteGenerator } from '@bobthered/tailwindcssPaletteGenerator';

export default {
    content: ['./src/**/*.{html,js,svelte,ts}'],
    theme: {
        extend: {
            colors: tailwindcssPaletteGenerator({
                colors: ['#FF0040', '#FFBB00'],
                names: ['red', 'yellow']
            })
        }
    },
    plugins: []
};