diff --git a/README.md b/README.md index c0376c6..cc6103a 100644 --- a/README.md +++ b/README.md @@ -2,13 +2,47 @@ A Ruby UI component library for DaisyUI using Phlex ✨ ## Installation -Install the gem and add to the application's Gemfile by executing: +### 1. Install CSS dependencies - $ bundle add phlexy_ui +You can install TailwindCSS and DaisyUI either via a JS bundler or via importmaps. -If bundler is not being used to manage dependencies, install the gem by executing: +
- $ gem install phlexy_ui +JS Bundler + +**TailwindCSS** + +Install TailwindCSS by following the instructions in the TailwindCSS documentation, using either the Tailwind CLI or PostCSS. + +**DaisyUI** + +Install DaisyUI by following the instructions in the DaisyUI documentation as a Node package. + +
+ +
+ +Importmaps + +**TailwindCSS with DaisyUI** + +You'll need to download a TailwindCSS standalone CLI that comes bundled with DaisyUI by following the instructions in the [tailwind-cli-extra repo](https://github.com/dobicinaitis/tailwind-cli-extra). + +Afterwards, place it somewhere in your project, e.g. in the bin directory. + +If you want to compile the standalone TailwindCSS CLI with DaisyUI yourself, you can follow the instructions here. + +**tailwindcss-rails gem** + +Install tailwindcss-rails gem for Rails to automatically include your TailwindCSS stylesheets when the asset pipeline compiles your assets. + +For this, you'll need to install the gem by following the instructions in the [tailwindcss-rails repo](https://github.com/rails/tailwindcss-rails). + +Finally, you'll need to set the `TAILWINDCSS_INSTALL_DIR` environment variable in your Rails app pointing to the directory where you plaed the binary from the tailwind-cli-extra repo mentioned above. e.g. `TAILWINDCSS_INSTALL_DIR=bin` + +
+ +### 2. Install Ruby dependencies ## Development