README

注意：此包基于 FilamentPHP 使用来生成 TailwindCSS 颜色阴影的相同颜色生成器。

安装

您可以通过 composer 安装此包

composer require reinbier/php-tailwind-colors

用法

此包使您能够生成自己的默认颜色变量或注册自己的自定义 TailwindCSS 颜色以在 HTML 中使用。只需将 Blade 指令 @tailwindColors 添加到您的 HTML 中即可访问这些变量。

<html>
<head>
    <title>My page</title>
    
    @tailwindColors
    
    <!-- more styles -->    
</head>
    <body>
    ...
    </body>
</html>

这将输出

<style>
    :root {
        --danger-50: 254, 242, 242;
        --danger-100: 254, 226, 226;
        --danger-200: 254, 202, 202;
        --danger-300: 252, 165, 165;
        --danger-400: 248, 113, 113;
        --danger-500: 239, 68, 68;
        --danger-600: 220, 38, 38;
        --danger-700: 185, 28, 28;
        --danger-800: 153, 27, 27;
        --danger-900: 127, 29, 29;
        --danger-950: 69, 10, 10;
        --gray-50: 250, 250, 250;
        --gray-100: 244, 244, 245;
        --gray-200: 228, 228, 231;
        (...)
        --warning-800: 146, 64, 14;
        --warning-900: 120, 53, 15;
        --warning-950: 69, 26, 3;
    }
</style>

使用来自 Color 类的默认颜色，如下所示

use Reinbier\PhpTailwindColors\Color;

$colors = [
    'danger' => Color::Red,
    'gray' => Color::Zinc,
    'info' => Color::Blue,
    'primary' => Color::Indigo,
    'success' => Color::Green,
    'warning' => Color::Amber,
];

现在您可以在您的 CSS 文件中使用这些变量。这些默认颜色还附带了一个 Tailwind preset 文件。

要像通常一样使用这些默认值作为 Tailwind 类，您需要在现有的 tailwind.config.js 中导入此预设。

import preset from './vendor/reinbier/php-tailwind-colors/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        ...
    ],
}

注册颜色

生成的 CSS 变量映射到预设文件中的 Tailwind 类，并可进行自定义。

要生成全新的颜色，请参阅下方的“注册额外颜色”。

自定义默认颜色

在服务提供者的 boot() 方法或中间件中，您可以调用 TailwindColor::register() 方法，该方法可用于自定义默认颜色。

如上所述，使用了 6 种默认颜色

Color 类包含您可以选择的每个 Tailwind CSS 颜色。

使用非 Tailwind 颜色

您可以使用 RGB 格式的从 50 到 950 的颜色阴影数组来使用不在 Tailwind CSS 颜色调色板中的自定义颜色。

use Reinbier\PhpTailwindColors\Facades\TailwindColor;

TailwindColor::register([
    'danger' => [
        50 => '254, 242, 242',
        100 => '254, 226, 226',
        200 => '254, 202, 202',
        300 => '252, 165, 165',
        400 => '248, 113, 113',
        500 => '239, 68, 68',
        600 => '220, 38, 38',
        700 => '185, 28, 28',
        800 => '153, 27, 27',
        900 => '127, 29, 29',
        950 => '69, 10, 10',
    ],
]);

从十六进制代码生成自定义颜色

您可以使用 Color::hex() 方法从十六进制代码生成自定义调色板。

use Reinbier\PhpTailwindColors\Color;
use Reinbier\PhpTailwindColors\Facades\TailwindColor;

TailwindColor::register([
    'danger' => Color::hex('#ff0000'),
]);

从 RGB 值生成自定义颜色

您可以使用 Color::rgb() 方法从 RGB 值生成自定义调色板。

use Reinbier\PhpTailwindColors\Color;
use Reinbier\PhpTailwindColors\Facades\TailwindColor;

TailwindColor::register([
    'danger' => Color::rgb('rgb(255, 0, 0)'),
]);

注册额外颜色

您可以在整个应用程序中使用注册的额外颜色

use Reinbier\PhpTailwindColors\Color;
use Reinbier\PhpTailwindColors\Facades\TailwindColor;

TailwindColor::register([
    'mycolor' => Color::hex('#ffff00'),
]);

现在，当您想在自己的 HTML 中使用此颜色（如 text-mycolor-300 或 bg-mycolor-950）时，应在您的 tailwind.config.js 文件中将其添加到您的颜色中，并重新构建您的资产

export default {
    
    // other tailwind configuration...
    
    theme: {
        extend: {
            colors: {
                mycolor: {
                    50: 'rgba(var(--mycolor-50), <alpha-value>)',
                    100: 'rgba(var(--mycolor-100), <alpha-value>)',
                    200: 'rgba(var(--mycolor-200), <alpha-value>)',
                    300: 'rgba(var(--mycolor-300), <alpha-value>)',
                    400: 'rgba(var(--mycolor-400), <alpha-value>)',
                    500: 'rgba(var(--mycolor-500), <alpha-value>)',
                    600: 'rgba(var(--mycolor-600), <alpha-value>)',
                    700: 'rgba(var(--mycolor-700), <alpha-value>)',
                    800: 'rgba(var(--mycolor-800), <alpha-value>)',
                    900: 'rgba(var(--mycolor-900), <alpha-value>)',
                    950: 'rgba(var(--mycolor-950), <alpha-value>)',
                },
            }
        }
    }
}

==> 最后，构建您的资产并设置完成！

测试

composer test

变更日志

请参阅 CHANGELOG 了解最近更改的详细信息。

贡献

请参阅 CONTRIBUTING 了解详细信息。

安全漏洞

请审查我们的安全策略了解如何报告安全漏洞。

鸣谢

许可

MIT 许可证 (MIT)。请参阅许可文件了解更多信息。

reinbier / php-tailwind-colors

维护者

详细信息