PHP code example of capevace / tailpipe

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

capevace / tailpipe example snippets

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

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

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

// 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

// Using the Tailpipe class
use Tailpipe\Tailpipe;

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

// Using the Tailpipe class
use Tailpipe\Tailpipe;

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

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

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

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

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

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

blade
<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>