Skip to content

Commit 94f2225

Browse files
karinevieirakarinevieira
committed
Add css template to install ruby_ui with import maps and tailwind 4
1 parent 67b8695 commit 94f2225

2 files changed

Lines changed: 149 additions & 1 deletion

File tree

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,12 @@ def add_ruby_ui_module_to_components_base
5454

5555
def add_tailwind_css
5656
say "Adding RubyUI styles to application css"
57-
template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
57+
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")
60+
else
61+
template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
62+
end
5863
end
5964

6065
def add_tailwind_config
@@ -64,6 +69,8 @@ def add_tailwind_config
6469
template "tailwind.config.js.js-package.erb", Rails.root.join("tailwind.config.js")
6570
elsif File.exist?(Rails.root.join("config/tailwind.config.js")) # tailwindcss-rails gem
6671
template "tailwind.config.js.tailwindcss-rails.erb", Rails.root.join("config/tailwind.config.js")
72+
elsif File.exist?(Rails.root.join("app/assets/tailwind/application.css")) # tailwindcss-rails gem with Tailwind 4
73+
say "Cannot find tailwind.config.js. This is expected with tailwindcss-rails and Tailwind v4.", :green
6774
else
6875
say "Cannot find tailwind.config.js. You will need to install tailwind config manually", :red
6976
end

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

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

0 commit comments

Comments
 (0)