Download the PHP package devanoxltd/tailwind-class-merge-laravel without Composer
On this page you can find all versions of the php package devanoxltd/tailwind-class-merge-laravel. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download devanoxltd/tailwind-class-merge-laravel
More information about devanoxltd/tailwind-class-merge-laravel
Files in devanoxltd/tailwind-class-merge-laravel
Package tailwind-class-merge-laravel
Short Description TailwindClassMerge for Laravel merges multiple Tailwind CSS classes by automatically resolving conflicts between them
License MIT
Informations about the package tailwind-class-merge-laravel
TailwindClassMerge for Laravel allows you to merge multiple Tailwind CSS classes and automatically resolves conflicts between classes by removing classes conflicting with a class defined later. This is especially helpful when you want to override Tailwind CSS classes in your Blade components.
A Laravel / PHP port of tailwind-merge by dcastil.
Supports Tailwind v3.0 up to v3.3.
If you find this package helpful, please consider sponsoring the maintainer:
- Devanox Private Limited: github.com/sponsors/devanoxltd
If you are NOT using Laravel, you can use the TailwindClassMerge for PHP directly.
Table of Contents
- Get Started
- Usage
- Laravel Blade Components
- Laravel Blade Directive
- Everywhere else in Laravel
- Configuration
- Custom Tailwind Config
- Contributing
Get Started
Requires Laravel 10
First, install TailwindClassMerge for Laravel
via the Composer package manager:
Optionally, publish the configuration file:
This will create a config/tailwind-class-merge.php
configuration file in your project, which you can modify to your needs
using environment variables. For more information, see the Configuration section:
Finally, you may use TailwindClassMerge
in various places like your Blade components:
TailwindClassMerge
is not only capable of resolving conflicts between basic Tailwind CSS classes, but also handles more complex scenarios:
It's possible to pass the classes as a string, an array or a combination of both:
Usage
For in depth documentation and general PHP examples, take a look at the devanoxltd/tailwind-class-merge-php repository.
Use in Laravel Blade Components
Create your Blade components as you normally would, but instead of specifying the class
attribute directly, use the mergeClasses
method:
Now you can use your Blade components and pass additional classes to merge:
This will render the following HTML:
Note: Usage of
$attributes->merge(['class' => '...'])
is currently not supported due to limitations in Laravel.
Merge classes on multiple elements
By default Laravel allows you to only merge classes in one place. But with TailwindClassMerge
you can merge classes on multiple elements by using forAttributes()
:
You can now specify additional classes for the button and the svg icon:
This will render the following HTML:
Note: Use
withoutForAttributes()
on your main attributes bag, otherwise allcomponent:xyz:class
attributes will be rendered in the output.
If you want to rename the blade component prefix, you can do so in the config/tailwind-class-merge.php
configuration file:
Use Laravel Blade Directive
The package registers a Blade directive which can be used to merge classes in your Blade views:
If you want to rename the blade directive, you can do so in the config/tailwind-class-merge.php
configuration file:
You could even disable the directive completely by setting it to null
:
Everywhere else in Laravel
If you don't use Laravel Blade, you can still use TailwindClassMerge
by using the Facade or the helper method directly:
Facade
Helper Method
More usage examples
Take a look at the TailwindClassMerge for PHP repository.
Configuration
If you are using Tailwind CSS without any extra config, you can use TailwindClassMerge right away. And stop reading here.
If you're using a custom Tailwind config, you may need to configure TailwindClassMerge as well to merge classes properly.
By default TailwindClassMerge is configured in a way that you can still use it if all the following apply to your Tailwind config:
- Only using color names which don't clash with other Tailwind class names
- Only deviating by number values from number-based Tailwind classes
- Only using font-family classes which don't clash with default font-weight classes
- Sticking to default Tailwind config for everything else
If some of these points don't apply to you, you need to customize the configuration.
Configure Prefix
You can configure the prefix directly in the config/tailwind-class-merge.php
configuration file or by setting the environment variable:
Modify merge process
If TailwindClassMerge is not able to merge your changes properly you can modify the merge process by modifying existing class groups or adding new class groups.
For example, if you want to add a custom font size of "very-large":
For a more detailed explanation of the configuration options, visit the original package documentation.
Contributing
Thank you for considering contributing to TailwindClassMerge for Laravel
! The contribution guide can be found in the CONTRIBUTING.md file.
TailwindClassMerge for PHP
is an open-sourced software licensed under the MIT license.
All versions of tailwind-class-merge-laravel with dependencies
laravel/framework Version ^v11.32
devanoxltd/tailwind-class-merge-php Version ^v2.3