Download the PHP package capevace/tailpipe without Composer

Tailpipe

Tailwind CSS variables in PHP

Made by Lukas Mateffy

Features

• Access Tailwind CSS variables in your PHP code
• Generates .php file containing your theme variables
• Uses a Tailwind plugin, so it updates on every build
• Integrations for Laravel, but can also be used in other PHP frameworks
• enable more variables if you want

Tailpipe is a PHP package that enables you to access Tailwind CSS variables in your PHP code. It is an extension for Tailwind CSS that generates a .php file containing the variables, which can then be used in your PHP application. This allows you to keep your styling consistent across both your CSS and PHP code, making your application more maintainable and organized.

It also provides tight integration with Laravel, allowing you to access the variables using a global helper function, a facade, or a Blade directive.

• Installation
  • Package Installation
  • Tailwind CSS Plugin Installation
• Usage
  • Helper function
  • Facade
  • Blade directive
  • Using the Tailpipe class
• Options
  • parse: true
  • Required setup for non-Laravel projects
  • Enabling more variables
• Real-world example

Installation

To install the Tailpipe package, you will need to install both the Laravel package capevace/tailpipe and the Tailwind CSS plugin JS package @capevace/tailpipe.

PHP Package Installation

1. Install the package using Composer:

2. The package will automatically register its service provider and facade in your Laravel application, if you're using it.

Tailwind CSS Plugin Installation

1. Install the package using npm or yarn:

2. Add the plugin to your tailwind.config.js file:

This will configure the plugin to generate a tailpipe.php file in your resources/css directory, containing the theme variables.

Usage

Tailpipe exposes a tailpipe() helper function, which you can use to access the variables in your PHP code. It also provides tight integration with Laravel, allowing you to access the variables using a facade or a Blade directive.

Helper function

You can use the tailpipe() helper function like this:

Facade

Using a Facade:

Blade directive

You can also use the @tailpipe Blade directive:

Using the Tailpipe class

If you want to use the Tailpipe class directly, you can do so like this:

When using the Tailpipe class directly, you can pass along the filepath to your tailpipe.php file. This will be used in that specific instance, allowing you to use multiple tailpipe.php files per project.

Options

The tailpipe() helper function accepts the following options:

parse: bool

If parse is set to true, the value will be parsed and returned as a string without units. This is useful if you want to use the value in a script or to calculate with it, for example.

The following values will be parsed:

Numbers will be parsed from the following units: px, rem, em, vh, vw, vmin, vmax, ms, s, %, deg, rad, turn.

Required setup for non-Laravel projects

By default, the plugin will generate a tailpipe.php file in your resources/css directory. The path is determined using Laravel's resource_path function.

If you're not using Laravel, you can have to set the outputPath option to a custom path:

You will also need to set the TAILPIPE_PATH environment variable to the path of the tailpipe.php file.

In the .env file:

Or in your PHP code:

Enabling more variables

By default, only the following variables are processed:

• colors
• spacing
• screens
• borderWidth
• borderRadius
• fontFamily
• fontSize
• fontWeight
• height
• width
• zIndex
• boxShadow
• letterSpacing
• lineHeight

Real World Example

Here's a real world example of how you can use Tailpipe in your Laravel application. This example uses the Alpine x-data directive to initialize a component based on the current breakpoint and loads a placeholder image with the correct theme colors.

The placeholder resolves to the following image:

Changelog

Please see CHANGELOG for more information on what has changed recently.