Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add config to install ruby_ui with import maps and tailwind 4 #232

Merged
merged 4 commits into from
Mar 25, 2025
Merged

Add config to install ruby_ui with import maps and tailwind 4 #232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5322e0c
Add config to install ruby_ui with import maps and tailwind 4
karinevieira Mar 22, 2025
da0070d
Use shadcn classes
karinevieira Mar 22, 2025
26995d3
Replace tailwindcss-animate with tw-animate-css to support Tailwind 4
karinevieira Mar 22, 2025
81370c1
Install tailwind plugins
karinevieira Mar 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 22 additions & 13 deletions lib/generators/ruby_ui/install/install_generator.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,27 +52,32 @@ def add_ruby_ui_module_to_components_base
end
end

def add_tailwind_css
say "Adding RubyUI styles to application css"
template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
end

def add_tailwind_config
say "Adding RubyUI config to tailwind config"

if File.exist?(Rails.root.join("tailwind.config.js")) # tailwindcss js package
template "tailwind.config.js.js-package.erb", Rails.root.join("tailwind.config.js")
elsif File.exist?(Rails.root.join("config/tailwind.config.js")) # tailwindcss-rails gem
template "tailwind.config.js.tailwindcss-rails.erb", Rails.root.join("config/tailwind.config.js")
if using_tailwindcss_rails_gem?
template "application.css.erb", Rails.root.join("app/assets/tailwind/application.css")
else
say "Cannot find tailwind.config.js. You will need to install tailwind config manually", :red
template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
end
end

def install_tailwind_animate
say "Installing tailwindcss-animate plugin"
def install_tw_animate_css
say "Installing tw-animate-css plugin"

install_js_package("tw-animate-css")
end

def install_tailwindcss_forms
say "Installing @tailwindcss/forms plugin"

install_js_package("tailwindcss-animate")
install_js_package("@tailwindcss/forms")
end

def install_tailwindcss_typography
say "Installing @tailwindcss/typography plugin"

install_js_package("@tailwindcss/typography")
end

def add_ruby_ui_base
Expand All @@ -85,6 +90,10 @@ def add_ruby_ui_base
def gem_installed?(name)
Gem::Specification.find_all_by_name(name).any?
end

def using_tailwindcss_rails_gem?
File.exist?(Rails.root.join("app/assets/tailwind/application.css"))
end
end
end
end
153 changes: 153 additions & 0 deletions lib/generators/ruby_ui/install/templates/application.css.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
@import "tailwindcss";
@import "../../../vendor/javascript/tw-animate-css.js";
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this line? I think something from your project might have snuck in here...?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or maybe this is somehow related to the tailwind animate plugin? But when I ran importmap pin tailwindcss-animate it did not add that file to my vendor dir:

importmap pin tailwindcss-animate
Pinning "tailwindcss-animate" to vendor/javascript/tailwindcss-animate.js via download from https://ga.jspm.io/npm:[email protected]/index.js
Pinning "tailwindcss/plugin" to vendor/javascript/tailwindcss/plugin.js via download from https://ga.jspm.io/npm:[email protected]/dist/plugin.js

Weirdly the output seems to indicate that it saves the tailwind plugin file at vendor/javascript/tailwindcss/plugin.js but instead it added vendor/javascript/tailwindcss--plugin.js

Copy link
Contributor Author

@karinevieira karinevieira Mar 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this line? I think something from your project might have snuck in here...?

That's right @sdhull, exactly!

The tailwindcss-animate library does not support Tailwind 4, so as an alternative, I am using tw-animate-css. However, when installing it with importmaps, this file is added to my project: vendor/javascript/tw-animate-css.js.

To successfully start the application using bin/dev, I had to modify the path to make it work properly. Otherwise, I get the following error:

Error: Can't resolve 'tw-animate-css' in 'my_project_path/app/assets/tailwind'


@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
Comment on lines +4 to +5
Copy link
Contributor Author

@karinevieira karinevieira Mar 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tailwind 4 brought container query support into core so we don't need the @tailwindcss/container-queries plugin anymore.


@custom-variant dark (&:is(.dark *));

:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);

/* ruby_ui specific */
--warning: hsl(38 92% 50%);
--warning-foreground: hsl(0 0% 100%);
--success: hsl(87 100% 37%);
--success-foreground: hsl(0 0% 100%);

/* Container settings */
--container-center: true;
--container-padding: hsl(2rem);
--container-max-width-2xl: hsl(1400px);
}

.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.145 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.145 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.985 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.396 0.141 25.723);
--destructive-foreground: oklch(0.637 0.237 25.331);
--border: oklch(0.269 0 0);
--input: oklch(0.269 0 0);
--ring: oklch(0.439 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(0.269 0 0);
--sidebar-ring: oklch(0.439 0 0);

/* ruby_ui specific */
--warning: hsl(38 92% 50%);
--warning-foreground: hsl(0 0% 100%);
--success: hsl(84 81% 44%);
--success-foreground: hsl(0 0% 100%);
}

@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-warning: var(--warning);
--color-warning-foreground: var(--warning-foreground);
--color-success: var(--success);
--color-success-foreground: var(--success-foreground);
}

@layer base {
* {
@apply border-border;
}

body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;

/* docs specific */
/* https://css-tricks.com/snippets/css/system-font-stack/ */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
}