README

Tailpipe

在PHP中使用Tailwind CSS变量

由Lukas Mateffy制作

<?php

$green500 = tailpipe('colors.green.500');
// -> #059669

$margin = tailpipe('spacing.4');
// -> 1rem

$primary = tailpipe('colors.primary.500');
// -> #your-theme-color

特性

在您的PHP代码中访问Tailwind CSS变量
生成包含主题变量的.php文件
使用Tailwind插件，因此每次构建都会更新
支持Laravel，但也可用于其他PHP框架
默认启用常见变量，但如果需要，您可以启用更多变量

Tailpipe是一个PHP包，允许您在PHP代码中访问Tailwind CSS变量。它是Tailwind CSS的扩展，生成包含变量的.php文件，然后可以在您的PHP应用程序中使用。这允许您在CSS和PHP代码之间保持一致的样式，使您的应用程序更易于维护和组织。

它还提供了与Laravel的紧密集成，允许您使用全局辅助函数、门面或Blade指令来访问变量。

安装
- 包安装
- 安装Tailwind CSS插件
使用
选项
实际例子

安装

要安装Tailpipe包，您需要安装Laravel包capevace/tailpipe和Tailwind CSS插件JS包@capevace/tailpipe。

PHP包安装

使用Composer安装包

composer require capevace/tailpipe

如果使用，该包将自动在您的Laravel应用程序中注册其服务提供程序和门面。

安装Tailwind CSS插件

使用npm或yarn安装包

npm install @capevace/tailpipe

将插件添加到您的tailwind.config.js文件中

// tailwind.config.js

module.exports = {
  plugins: [
    // ..other plugins
    require('@capevace/tailpipe')
  ],
};

这将配置插件在您的resources/css目录中生成一个tailpipe.php文件，包含主题变量。

使用

Tailpipe公开了一个tailpipe()辅助函数，您可以使用它来在PHP代码中访问变量。它还提供了与Laravel的紧密集成，允许您使用门面或Blade指令来访问变量。

辅助函数

您可以使用以下方式使用tailpipe()辅助函数

// Using the global helper function
$yellow500 = tailpipe('colors.yellow.500');
// -> #fbbf24

门面

使用门面

// Using the facade
use Tailpipe\Facades\Tailpipe;

$yellow500 = Tailpipe::get('colors.yellow.500');
// -> #fbbf24

Blade指令

您还可以使用@tailpipe Blade指令

{{-- view.blade.php --}}

<div
    x-data="{ color: '@tailpipe('colors.yellow.500')' }"
></div>

使用Tailpipe类

如果您想直接使用Tailpipe类，可以这样操作

// Using the Tailpipe class
use Tailpipe\Tailpipe;

$yellow500 = (new Tailpipe)->get('colors.yellow.500');

当直接使用Tailpipe类时，您可以传递tailpipe.php文件的文件路径。这将用于特定实例，允许在每个项目中使用多个tailpipe.php文件。

// Using the Tailpipe class
use Tailpipe\Tailpipe;

$yellow500 = (new Tailpipe('/my/custom/path/tailpipe.php'))->get('colors.yellow.500');

选项

tailpipe()辅助函数接受以下选项

`parse: bool`

如果将parse设置为true，则将值解析并返回不带单位的字符串。如果您想在脚本中使用该值或与之计算，这很有用。

$yellow500 = tailpipe('colors.yellow.500', parse: true);
// -> 'fbbf24', without the `#`

$spacing = tailpipe('screens.md', parse: true) / 2;
// -> 768 (integer without the `px`) / 2 = 384

以下值将被解析

数字将解析以下单位：px、rem、em、vh、vw、vmin、vmax、ms、s、%、deg、rad、turn。

非Laravel项目的必要设置

默认情况下，插件将在您的 resources/css 目录中生成一个 tailpipe.php 文件。路径是通过 Laravel 的 resource_path 函数确定的。

如果您不使用 Laravel，则需要将 outputPath 选项设置为自定义路径。

// tailwind.config.js

const tailpipe = require('@capevace/tailpipe');

module.exports = {
  plugins: [
    // ..other plugins
    tailpipe({
        outputPath: 'path/to/tailpipe.php'
    })
  ],
};

您还需要将 TAILPIPE_PATH 环境变量设置为 tailpipe.php 文件的路径。

在 .env 文件中

TAILPIPE_PATH=/path/to/tailpipe.php

或在您的 PHP 代码中

putenv('TAILPIPE_PATH=/path/to/tailpipe.php');

启用更多变量

默认情况下，只处理以下变量

颜色
间距
屏幕
边框宽度
边框圆角
字体族
字体大小
字体粗细
高度
宽度
z-index
阴影
字母间距
行高

// tailwind.config.js

const tailpipe = require('@capevace/tailpipe');

module.exports = {
  plugins: [
    // ..other plugins
    tailpipe({
        // Filters through all top level theme variables
        include: (key, value) => {
            // Return true to include the variable
            // Return false to exclude the variable
            return [
                ...tailpipe.defaultVariables,
                'opacity',
                'fill',
                'stroke',
            ].includes(key);
        }
    })
  ],
};

现实世界示例

以下是一个现实世界示例，说明如何在 Laravel 应用程序中使用 Tailpipe。此示例使用 Alpine 的 x-data 指令根据当前断点初始化组件，并加载具有正确主题颜色的占位图。

<div 
    x-data="{
        init() {
            // Use tailpipe to get the breakpoint values

            const breakpoint = @js(@tailpipe('screens.md'));
            // -> '768px'

            if (document.body.offsetWidth + 'px' > breakpoint) {
                this.initDesktop();
            } else {
                this.initMobile();
            }
        }
    }"
>
    @php
        // Providing `parse: true` as an option results in a value with units removed
        
        // parse:true removes `#`
        $background = tailpipe('colors.gray.100', parse: true);
        // -> 'f3f4f6'
        
        $foreground = tailpipe('colors.primary.600', parse: true);
        // -> 'd97706'
        
        // parse:true removes `px`
        $width = tailpipe('screens.sm', parse: true);
        // -> 640;
    @endphp
    
    <img src="https://via.placeholder.com/{{ $width }}x{{ $width }}/{{ $background }}/{{ $foreground }}?text={{ $background }}+{{ $foreground }}" />
</div>

占位图解析为以下图像

更新日志

有关最近更改的更多信息，请参阅更新日志

capevace / tailpipe

维护者

详情