Update README.md

README.md

@@ -1,14 +1,87 @@
 A Ruby UI component library for DaisyUI using Phlex ✨
 
-## Installation
+# 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:
+### JS Bundler
 
-    $ gem install phlexy_ui
+**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
+
+#### Install Phlex
+
+Install Phlex by following the instructions in the [Phlex documentation](https://www.phlex.fun/#rails-introduction).
+
+#### Install PhlexyUI
+
+1. Add the PhlexyUI gem to your Gemfile:
+
+```
+bundle add phlexy_ui
+```
+
+2. Include the `PhlexyUI` module in `ApplicationComponent`:
+
+```rb
+class ApplicationComponent < Phlex::HTML
+  include PhlexyUI
+end
+```
+
+3. Update your `tailwind.config.js` file to include PhlexyUI styles:
+
+```js
+const execSync = require("child_process").execSync;
+const outputPhlexyUI = execSync("bundle show phlexy_ui", { encoding: "utf-8" });
+const phlexyUIPath = outputPhlexyUI.trim() + "/**/*.rb";
+module.exports = {
+  content: [
+    // ... other paths
+    phlexyUIPath,
+  ],
+};
+```
+
+4. Update your tailwind.config.js file to detect TailwindCSS classes in Ruby files.
+
+```js
+module.exports = {
+  content: [
+    // ... other paths
+    //
+    // Note the "rb" extension at the end
+    "./app/views/**/*.{erb,haml,html,slim,rb}",
+  ],
+};
+```
 
 ## Development