Skip to content

Commit bd5eb12

Browse files
karinevieirakarinevieira
committed
Add config to install ruby_ui with import maps and tailwind 4
1 parent 67b8695 commit bd5eb12

File tree

2 files changed

+145
-12
lines changed

2 files changed

+145
-12
lines changed

‎lib/generators/ruby_ui/install/install_generator.rb‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,27 +52,27 @@ def add_ruby_ui_module_to_components_base
5252
end
5353
end
5454

55-
def add_tailwind_css
56-
say "Adding RubyUI styles to application css"
57-
template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
58-
end
59-
6055
def add_tailwind_config
6156
say "Adding RubyUI config to tailwind config"
6257

63-
if File.exist?(Rails.root.join("tailwind.config.js")) # tailwindcss js package
64-
template "tailwind.config.js.js-package.erb", Rails.root.join("tailwind.config.js")
65-
elsif File.exist?(Rails.root.join("config/tailwind.config.js")) # tailwindcss-rails gem
66-
template "tailwind.config.js.tailwindcss-rails.erb", Rails.root.join("config/tailwind.config.js")
58+
if File.exist?(Rails.root.join("app/assets/tailwind/application.css")) # tailwindcss-rails gem with Tailwind 4
59+
template "application.css.erb", Rails.root.join("app/assets/tailwind/application.css")
6760
else
68-
say "Cannot find tailwind.config.js. You will need to install tailwind config manually", :red
61+
template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
6962
end
7063
end
7164

7265
def install_tailwind_animate
73-
say "Installing tailwindcss-animate plugin"
66+
say "Installing tw-animate-css plugin"
7467

75-
install_js_package("tailwindcss-animate")
68+
package = "tw-animate-css"
69+
if File.exist?(Rails.root.join("yarn.lock"))
70+
run "yarn add #{package}"
71+
elsif File.exist?(Rails.root.join("package-lock.json"))
72+
run "npm install #{package}"
73+
else
74+
say "Could not detect the package manager, you need to install '#{package}' manually", :red
75+
end
7676
end
7777

7878
def add_ruby_ui_base

‎lib/generators/ruby_ui/install/templates/application.css.erb‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
@import "tailwindcss";
2+
@import "tw-animate-css";
3+
4+
@custom-variant dark (&:is(.dark *));
5+
6+
:root {
7+
/* Base colors */
8+
--background: hsl(0 0% 100%);
9+
--foreground: hsl(240 10% 3.9%);
10+
--card: hsl(0 0% 100%);
11+
--card-foreground: hsl(240 10% 3.9%);
12+
--popover: hsl(0 0% 100%);
13+
--popover-foreground: hsl(240 10% 3.9%);
14+
--primary: hsl(240 5.9% 10%);
15+
--primary-foreground: hsl(0 0% 98%);
16+
--secondary: hsl(240 4.8% 95.9%);
17+
--secondary-foreground: hsl(240 5.9% 10%);
18+
--muted: hsl(240 4.8% 95.9%);
19+
--muted-foreground: hsl(240 3.8% 46.1%);
20+
--accent: hsl(240 4.8% 95.9%);
21+
--accent-foreground: hsl(240 5.9% 10%);
22+
--destructive: hsl(0 84.2% 60.2%);
23+
--destructive-foreground: hsl(0 0% 98%);
24+
--border: hsl(240 5.9% 90%);
25+
--input: hsl(240 5.9% 90%);
26+
--ring: hsl(240 5.9% 10%);
27+
--radius: hsl(0.5rem);
28+
29+
/* ruby_ui specific */
30+
--warning: hsl(38 92% 50%);
31+
--warning-foreground: hsl(0 0% 100%);
32+
--success: hsl(87 100% 37%);
33+
--success-foreground: hsl(0 0% 100%);
34+
35+
/* Container settings */
36+
--container-padding: hsl(2rem);
37+
--container-max-width-2xl: hsl(1400px);
38+
}
39+
40+
.dark {
41+
--background: hsl(240 10% 3.9%);
42+
--foreground: hsl(0 0% 98%);
43+
--card: hsl(240 10% 3.9%);
44+
--card-foreground: hsl(0 0% 98%);
45+
--popover: hsl(240 10% 3.9%);
46+
--popover-foreground: hsl(0 0% 98%);
47+
--primary: hsl(0 0% 98%);
48+
--primary-foreground: hsl(240 5.9% 10%);
49+
--secondary: hsl(240 3.7% 15.9%);
50+
--secondary-foreground: hsl(0 0% 98%);
51+
--muted: hsl(240 3.7% 15.9%);
52+
--muted-foreground: hsl(240 5% 64.9%);
53+
--accent: hsl(240 3.7% 15.9%);
54+
--accent-foreground: hsl(0 0% 98%);
55+
--destructive: hsl(0 62.8% 30.6%);
56+
--destructive-foreground: hsl(0 0% 98%);
57+
--border: hsl(240 3.7% 15.9%);
58+
--input: hsl(240 3.7% 15.9%);
59+
--ring: hsl(240 4.9% 83.9%);
60+
61+
/* ruby_ui specific */
62+
--warning: hsl(38 92% 50%);
63+
--warning-foreground: hsl(0 0% 100%);
64+
--success: hsl(84 81% 44%);
65+
--success-foreground: hsl(0 0% 100%);
66+
}
67+
68+
@theme inline {
69+
--color-background: var(--background);
70+
--color-foreground: var(--foreground);
71+
--color-card: var(--card);
72+
--color-card-foreground: var(--card-foreground);
73+
--color-popover: var(--popover);
74+
--color-popover-foreground: var(--popover-foreground);
75+
--color-primary: var(--primary);
76+
--color-primary-foreground: var(--primary-foreground);
77+
--color-secondary: var(--secondary);
78+
--color-secondary-foreground: var(--secondary-foreground);
79+
--color-muted: var(--muted);
80+
--color-muted-foreground: var(--muted-foreground);
81+
--color-accent: var(--accent);
82+
--color-accent-foreground: var(--accent-foreground);
83+
--color-destructive: var(--destructive);
84+
--color-destructive-foreground: var(--destructive-foreground);
85+
--color-border: var(--border);
86+
--color-input: var(--input);
87+
--color-ring: var(--ring);
88+
--color-radius: var(--radius);
89+
--color-warning: var(--warning);
90+
--color-warning-foreground: var(--warning-foreground);
91+
--color-success: var(--success);
92+
--color-success-foreground: var(--success-foreground);
93+
--color-container-padding: var(--container-padding);
94+
--color-container-max-width-2xl: var(--container-max-width-2xl);
95+
--color-background: var(--background);
96+
--color-foreground: var(--foreground);
97+
--color-card: var(--card);
98+
--color-card-foreground: var(--card-foreground);
99+
--color-popover: var(--popover);
100+
--color-popover-foreground: var(--popover-foreground);
101+
--color-primary: var(--primary);
102+
--color-primary-foreground: var(--primary-foreground);
103+
--color-secondary: var(--secondary);
104+
--color-secondary-foreground: var(--secondary-foreground);
105+
--color-muted: var(--muted);
106+
--color-muted-foreground: var(--muted-foreground);
107+
--color-accent: var(--accent);
108+
--color-accent-foreground: var(--accent-foreground);
109+
--color-destructive: var(--destructive);
110+
--color-destructive-foreground: var(--destructive-foreground);
111+
--color-border: var(--border);
112+
--color-input: var(--input);
113+
--color-ring: var(--ring);
114+
--color-warning: var(--warning);
115+
--color-warning-foreground: var(--warning-foreground);
116+
--color-success: var(--success);
117+
--color-success-foreground: var(--success-foreground);
118+
}
119+
120+
@layer base {
121+
* {
122+
@apply border-border;
123+
}
124+
125+
body {
126+
@apply bg-background text-foreground;
127+
font-feature-settings: "rlig" 1, "calt" 1;
128+
129+
/* docs specific */
130+
/* https://css-tricks.com/snippets/css/system-font-stack/ */
131+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
132+
}
133+
}

0 commit comments

Comments
 (0)