From 0ce35797e0c54781cfd3307f1e1042258088db67 Mon Sep 17 00:00:00 2001
From: David Alejandro
 <15317732+davidalejandroaguilar@users.noreply.github.com>
Date: Fri, 20 Sep 2024 00:11:39 +0200
Subject: [PATCH] Update README.md

---
 README.md | 91 +++++++++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 82 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index c0376c6..685d79d 100644
--- a/README.md
+++ b/README.md
@@ -1,27 +1,100 @@
 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**
 
-## Development
+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
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `bundle exec rspec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 
-## Contributing
+# 💻 Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/PhlexyUI/phlexy_ui. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/[USERNAME]/phlexy_ui/blob/main/CODE_OF_CONDUCT.md).
 
-## License
+# 📃 License
 
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
 
-## Code of Conduct
+# ☝️ Code of Conduct
 
 Everyone interacting in the PhlexyUI project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/phlexy_ui/blob/main/CODE_OF_CONDUCT.md).