- Docs
- installation
Installation
Guide on installing Flexiwind via Composer and configuring Tailwind CSS.
Prerequisites
Flexiwind is built on top of a few tools you'll need to have in place before getting started. If you already have a Laravel project running with Tailwind CSS, you're most of the way there.
Tailwindcss
Utility-first CSS framework.
Laravel
PHP web framework.
Alpine.js
Minimal JS behavior framework. (Optional when not using Livewire)
Choose Your Path
Everyone's workflow is different. Choose the approach that fits your project best.
-
Install the CLI
Drop the Flexiwind CLI into your existing Laravel project as a dev dependency. This gives you access to all the component management commands.
Shellcomposer require --dev unoforge/flexiwind-cli -
Initialize your project
The init command scaffolds everything you need — configuration files, directory structure, and base styles. It's safe to run on existing projects; it won't overwrite anything you've already set up.
Shellphp artisan flexi:init -
Install base utilities
Every Flexiwind component relies on shared base utilities for colors, typography, and spacing. Install these first — they're the foundation everything else builds on.
Shellphp artisan flexi:add flexiwind-base
Next Steps
Start the development server
Fire up the dev server to see your setup in action. This command starts both the Laravel server and the Vite build process.
composer dev
Open http://localhost:8000
in your browser — if everything went smoothly, you'll see your app ready to go.
Add your first components
Now the fun part — start pulling in the components you need. The CLI copies them directly into your project, so you can customize every detail. Install one component or several at once:
php artisan flexi:add button inputNeed help?
Run php artisan flexi:help
anytime to see all available commands and options.