View Source mix salad.setup (SaladUI v1.0.0-beta.3)
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 configuration with SaladUI-specific settings
- Installing tailwindcss-animate plugin
- 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
TwMerge Integration - Adds TwMerge.Cache as a supervised process for CSS class merging functionality
CSS Setup
- Copies salad_ui.css to assets/css/
- Adds color scheme variables to app.css
- Imports SaladUI styles into the main CSS file
Tailwind Configuration
- Patches tailwind.config.js with SaladUI-specific plugins
- Copies tailwind.colors.json with design tokens
- Adds @tailwindcss/typography and tailwindcss-animate plugins
JavaScript Setup
- Downloads and installs tailwindcss-animate
- 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.Cacheassets/css/app.css
- Adds color scheme and importsassets/css/salad_ui.css
- Createdassets/tailwind.config.js
- Updated with plugins and content pathsassets/tailwind.colors.json
- Createdassets/js/app.js
- Adds SaladUI imports and hooksassets/vendor/tailwindcss-animate.js
- 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