Get started with PhlexyUI

PhlexyUI is a component library built with Phlex, a Ruby gem for building fast object-oriented HTML components. On top of DaisyUI, the most popular component library for Tailwind CSS.

You'll need to install TailwindCSS, DaisyUI, and Phlex for PhlexyUI to work.

1. Install CSS dependencies

You can install TailwindCSS and DaisyUI either via a JS bundler or via importmaps.

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.

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.

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.

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.

Install PhlexyUI

1. Add the PhlexyUI gem to your Gemfile:

1
bundle add phlexy_ui
2. (Optional) Include the PhlexyUI module in 
ApplicationComponent:
1
class ApplicationComponent < Phlex::HTML

2
  include PhlexyUI

3
end
This will allow you to use PhlexyUI components using the short-form syntax. For example: 
1
class SomeView < ApplicationView

2
  def view_template

3
    Button :primary do

4
      "Hello, world!"

5
    end

6
  end

7
end
If you don't include PhlexyUI, you can still use the namespaced syntax:
1
class SomeView < ApplicationView

2
  def view_template

3
    PhlexyUI::Button :primary do

4
      "Hello, world!"

5
    end

6
  end

7
end

Consider not including PhlexyUI in ApplicationComponent if:

  • You have your own component library with the same component names as PhlexyUI.
  • You're including your own components module in 
    ApplicationComponent
    .
In this scenario, including both PhlexyUI and your own component library in 
ApplicationComponent
will lead to naming conflicts.

3. Update your tailwind.config.js file to include PhlexyUI styles:

1
const execSync = require("child_process").execSync;

2
const outputPhlexyUI = execSync("bundle show phlexy_ui", { encoding: "utf-8" });

3
const phlexyUIPath = outputPhlexyUI.trim() + "/**/*.rb";

4
5
module.exports = {

6
  content: [

7
    // ... other paths

8
    phlexyUIPath,

9
  ],

10
};

4. Update your tailwind.config.js file to detect
          TailwindCSS classes in Ruby files.
1
module.exports = {

2
  content: [

3
    // ... other paths

4
    // 

5
    // Note the "rb" extension at the end

6
    "./app/views/**/*.{erb,haml,html,slim,rb}",

7
  ],

8
};