Weave Code
Code Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message
Blade Tailwind Extract

Blade Tailwind Extract Laravel Package

dxgx/blade-tailwind-extract

Laravel package that shrinks Livewire payloads by extracting long Tailwind class strings from Blade/Livewire into short hashed class names and a generated @apply CSS file. Supports class="", @class/->class arrays, dev inject vs prod extract, and collision-safe hashing.

View on GitHub
Deep Wiki
Context7

In blade files, tailwindcss class list extractor and restore to/from css file using tailwinds @apply

Frequently asked questions about Blade Tailwind Extract
How does this package reduce Livewire payload size?
The package replaces long Tailwind class strings in Blade templates with short hashed class names (e.g., `TW-a40f-card-wrapper`) and generates a CSS file with `@apply` rules. This drastically cuts the wire payload size when Livewire components update, especially for components with repeated class-heavy markup.
Can I use this package without Livewire?
While the package is optimized for Livewire payload reduction, it works with any Blade template. If you're not using Livewire, the benefits are limited to CSS optimization via `@apply`, but the extraction process still applies to static Blade files.
What Laravel versions does this package support?
The package supports Laravel 9.x and 10.x. Check the [GitHub repository](https://github.com/dxgx/blade-tailwind-extract) for the latest compatibility details, as newer Laravel releases may require updates to align with Blade or Artisan changes.
How do I install and configure this package?
Install via Composer: `composer require dxgx/blade-tailwind-extract`. Publish the config (optional) with `php artisan vendor:publish --tag=blade-tailwind-extract-config`. No additional setup is required unless you need to customize reserved classes or hashing behavior.
Will this break my existing Tailwind configuration?
No, the package works alongside your existing Tailwind setup. It doesn’t modify your `tailwind.config.js` or JIT mode. The generated CSS is standalone and can be merged into your existing build process (e.g., Vite or Laravel Mix).
What happens if I manually edit a Blade file after extraction?
Manually editing extracted Blade files (e.g., renaming or moving them) can invalidate the CSS hashes, causing styling issues. Always use `php artisan dg:blade-tailwind:restore` before editing and re-extract afterward. The package includes safeguards to skip reserved classes like `group` or `peer` to avoid Tailwind conflicts.
How do I integrate this into my CI/CD pipeline?
In development, use `restore` before editing Blade files and `extract` before commits. In production, ensure `extract` runs as part of your build/deploy process. The package provides Artisan commands for seamless integration, and you can automate it using Laravel Forge, GitHub Actions, or other CI tools.
Does this package work with Alpine.js or other frontend frameworks?
Yes, the package supports all Blade class patterns, including Alpine.js bindings like `x-bind:class` or `@class([])`. It’s framework-agnostic for the Blade layer but optimized for Tailwind CSS’s `@apply` feature. Just ensure your class lists are compatible with Tailwind’s syntax.
Are there any performance concerns during extraction?
The initial extraction (`wrap` and `extract` commands) may introduce latency for large codebases due to deduplication logic. However, this is a one-time cost per file. Subsequent runs are fast, and the package is designed to be efficient for repeated use in CI/CD pipelines.
What alternatives exist for reducing Livewire payload size?
Alternatives include manually shortening Tailwind classes, using Laravel Mix/Vite to inline critical CSS, or leveraging Livewire’s `wire:ignore` for static content. However, this package uniquely automates the process for Tailwind users, ensuring collision-safe hashing and bidirectional workflows (dev vs. prod).
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
calmfox/watch-sylius
damienfern/grpc-symfony-bundle
atoolo/index-bundle
atoolo/genai-bundle
coprotoai/laravel-ticket
davidjln/llm-carbon-bundle
cryonighter/valid-request-bundle
coolms/taxonomy-bundle
coolms/field-bundle
articulate-orm/symfony
aaix/laravel-tall-architect
ephoto/akeneo-connector
emmanuelballery/eb-plantumlbundle
emielburgman/symfony-visitor-beacon
emielburgman/symfony-visit-storage
emielburgman/symfony-security-headers
emielburgman/symfony-log-viewer
emarref/xdebug-bundle
emarref/pubnub-bundle
elriseio/finance-money-bundle