# `mix salad.setup`
[🔗](https://github.com/bluzky/salad_ui/blob/main/lib/mix/tasks/salad.setup.ex#L1)

Set up SaladUI in a Phoenix LiveView project.

This task configures the complete SaladUI development environment by:

* Adding TwMerge.Cache to the application supervision tree
* Configuring CSS color scheme variables (default: gray)
* Copying SaladUI CSS files to assets/css/
* Patching Tailwind CSS entrypoint with SaladUI-specific settings
* Installing tw-animate-css utilities
* Setting up JavaScript imports and LiveView hooks

## Usage

    mix salad.setup
    mix salad.setup --color-scheme slate
    mix salad.setup -c blue

## Options

  * `--color-scheme` (or `-c`) - Color scheme to use (default: "gray")
    Available schemes: gray, slate, stone, neutral, red, orange, amber,
    yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet,
    purple, fuchsia, pink, rose

## What it does

1. **TwMerge Integration** - Adds TwMerge.Cache as a supervised process for
   CSS class merging functionality

2. **CSS Setup**
   - Copies salad_ui.css to assets/css/
   - Adds color scheme variables to app.css
   - Imports SaladUI styles into the main CSS file

3. **Tailwind Configuration**
   - Patches app.css with SaladUI-specific sources and theme tokens
   - Copies tailwind.colors.json with design tokens for compatibility
   - Adds @tailwindcss/typography and tw-animate-css utilities

4. **JavaScript Setup**
   - Downloads tw-animate-css
   - Patches app.js to import SaladUI components and hooks
   - Registers SaladUIHook with LiveView

## After running this task

You can immediately start using SaladUI components in your templates:

    <.button>Click me</.button>
    <.dialog id="my-dialog">
      <.dialog_content>
        <p>Hello world!</p>
      </.dialog_content>
    </.dialog>

## Files modified

* `lib/[app]/application.ex` - Adds TwMerge.Cache
* `assets/css/app.css` - Adds color scheme and imports
* `assets/css/salad_ui.css` - Created
* `assets/css/app.css` - Updated with Tailwind v4 sources, plugins, and theme tokens
* `assets/tailwind.colors.json` - Created for compatibility
* `assets/js/app.js` - Adds SaladUI imports and hooks
* `assets/vendor/tw-animate.css` - Downloaded

## Example

    # Use default gray color scheme
    mix salad.setup

    # Use slate color scheme
    mix salad.setup --color-scheme slate

    # Short form
    mix salad.setup -c blue

---

*Consult [api-reference.md](api-reference.md) for complete listing*