Download the PHP package theunwindfront/laravel-blade-variants without Composer
On this page you can find all versions of the php package theunwindfront/laravel-blade-variants. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download theunwindfront/laravel-blade-variants
More information about theunwindfront/laravel-blade-variants
Files in theunwindfront/laravel-blade-variants
Package laravel-blade-variants
Short Description Tailwind CSS v4 plugin & Blade components for native, browser-driven variant styling.
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package laravel-blade-variants
@theunwindfront/laravel-blade-variants
A CSS-native, browser-driven Tailwind CSS v4 plugin to manage variants, sizes, and states for Laravel Blade components with zero server-side rendering overhead.
The Problem
Normally, implementing component variants in Laravel Blade involves complex conditional PHP arrays or calling tools like tailwind-merge at runtime to prevent style conflicts:
This is hard to maintain, and merging classes via regex on the server slows down page render times.
The Solution
This plugin moves state-based styling to native browser attribute matching. Instead of conditionally outputting classes in PHP, you assign standard attributes (like data-variant, data-size, data-state) and apply clean Tailwind modifiers directly in your HTML:
The browser automatically activates styles based on DOM attributes. This completely eliminates class conflicts (only one state attribute matches at a time!) and requires zero PHP parsing overhead to merge strings.
Installation
Install the package via Composer (for Blade component integration) and NPM (for the Tailwind CSS plugin):
Add the plugin to your main stylesheet (Tailwind CSS v4):
For Tailwind v3, import it in tailwind.config.js:
Usage Guide
1. In Your Blade Component (components/button.blade.php)
2. Available Modifiers
| Core Variant | Matches Attribute | Parent (Group) Modifier |
|---|---|---|
variant-{value} |
[data-variant="{value}"] |
group-variant-{value} |
size-{value} |
[data-size="{value}"] |
group-size-{value} |
state-{value} |
[data-state="{value}"] |
group-state-{value} |
theme-{value} |
[data-theme="{value}"] |
group-theme-{value} |
3. Presets & Custom Values
Out of the box, standard developer variants are pre-registered for IntelliSense autocomplete:
- Variants:
primary,secondary,success,danger,warning,info,ghost,link,outline - Sizes:
xs,sm,md,lg,xl,2xl - States:
active,inactive,open,closed,loading,disabled,checked,selected,expanded - Themes:
light,dark,system
To use a custom state value not included in the presets, use Tailwind's arbitrary bracket syntax:
This compiled selector resolves natively to [data-variant="custom-glass"].
👥 Credits
- Sagar Pansuriya - Lead Creator & Developer
🤝 Support
For questions or issues, contact [email protected]
📄 License
The MIT License (MIT). Please see License File for more information.
