Skip to content

Commit bf7d38c

Browse files
stephannvstephannv
authored
Update installation instructions for Tailwind V4 (#177)
1 parent 9afd5ea commit bf7d38c

File tree

2 files changed

+291
-354
lines changed

2 files changed

+291
-354
lines changed

‎app/views/docs/installation/rails_bundler.rb

Lines changed: 145 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ def view_template
77

88
Alert(variant: :info) do
99
AlertTitle { "RubyUI" }
10-
AlertDescription { "To take full advantage of RubyUI, the application is expected to be using TailwindCSS and Stimulus" }
10+
AlertDescription { "To take full advantage of RubyUI, the application is expected to be using TailwindCSS 4 and Stimulus" }
1111
end
1212

1313
Heading(level: 2, class: "!text-2xl pb-4 border-b") { "Using RubyUI CLI" }
@@ -58,7 +58,7 @@ def view_template
5858
end
5959

6060
code = <<~CODE
61-
bundle add phlex-rails --github phlex-ruby/phlex-rails --branch main
61+
bundle add phlex-rails
6262
CODE
6363
div(class: "w-full") do
6464
Codeblock(code, syntax: :javascript)
@@ -67,7 +67,7 @@ def view_template
6767
Alert(variant: :warning) do
6868
info_icon
6969
AlertTitle { "Phlex compatibility" }
70-
AlertDescription { "Note that RubyUI components target Phlex 2, but you can use them with Phlex 1.x as long as you are willing to adapt their code." }
70+
AlertDescription { "Note that RubyUI components target Phlex 2.x most recent version" }
7171
end
7272
end
7373
end
@@ -215,7 +215,7 @@ def default_attrs
215215
steps.add_step do
216216
step_container do
217217
Text(size: "4", weight: "semibold") do
218-
"Include RubyUI styles in your CSS"
218+
"Include RubyUI configuration & styles in your CSS"
219219
end
220220

221221
Text do
@@ -228,81 +228,154 @@ def default_attrs
228228
end
229229

230230
code = <<~STYLESHEET
231-
@tailwind base;
232-
@tailwind components;
233-
@tailwind utilities;
231+
@import "tailwindcss";
232+
233+
@plugin "@tailwindcss/forms";
234+
@plugin "@tailwindcss/typography";
235+
236+
@import "tw-animate-css";
237+
238+
@custom-variant dark (&:is(.dark *));
239+
240+
:root {
241+
--background: oklch(1 0 0);
242+
--foreground: oklch(0.145 0 0);
243+
--card: oklch(1 0 0);
244+
--card-foreground: oklch(0.145 0 0);
245+
--popover: oklch(1 0 0);
246+
--popover-foreground: oklch(0.145 0 0);
247+
--primary: oklch(0.205 0 0);
248+
--primary-foreground: oklch(0.985 0 0);
249+
--secondary: oklch(0.97 0 0);
250+
--secondary-foreground: oklch(0.205 0 0);
251+
--muted: oklch(0.97 0 0);
252+
--muted-foreground: oklch(0.556 0 0);
253+
--accent: oklch(0.97 0 0);
254+
--accent-foreground: oklch(0.205 0 0);
255+
--destructive: oklch(0.577 0.245 27.325);
256+
--destructive-foreground: oklch(0.577 0.245 27.325);
257+
--border: oklch(0.922 0 0);
258+
--input: oklch(0.922 0 0);
259+
--ring: oklch(0.708 0 0);
260+
--chart-1: oklch(0.646 0.222 41.116);
261+
--chart-2: oklch(0.6 0.118 184.704);
262+
--chart-3: oklch(0.398 0.07 227.392);
263+
--chart-4: oklch(0.828 0.189 84.429);
264+
--chart-5: oklch(0.769 0.188 70.08);
265+
--radius: 0.625rem;
266+
--sidebar: oklch(0.985 0 0);
267+
--sidebar-foreground: oklch(0.145 0 0);
268+
--sidebar-primary: oklch(0.205 0 0);
269+
--sidebar-primary-foreground: oklch(0.985 0 0);
270+
--sidebar-accent: oklch(0.97 0 0);
271+
--sidebar-accent-foreground: oklch(0.205 0 0);
272+
--sidebar-border: oklch(0.922 0 0);
273+
--sidebar-ring: oklch(0.708 0 0);
274+
275+
/* ruby_ui specific */
276+
--warning: hsl(38 92% 50%);
277+
--warning-foreground: hsl(0 0% 100%);
278+
--success: hsl(87 100% 37%);
279+
--success-foreground: hsl(0 0% 100%);
280+
281+
/* Container settings */
282+
--container-center: true;
283+
--container-padding: hsl(2rem);
284+
--container-max-width-2xl: hsl(1400px);
285+
}
234286
235-
@layer base {
236-
:root {
237-
--background: 0 0% 100%;
238-
--foreground: 240 10% 3.9%;
239-
--card: 0 0% 100%;
240-
--card-foreground: 240 10% 3.9%;
241-
--popover: 0 0% 100%;
242-
--popover-foreground: 240 10% 3.9%;
243-
--primary: 240 5.9% 10%;
244-
--primary-foreground: 0 0% 98%;
245-
--secondary: 240 4.8% 95.9%;
246-
--secondary-foreground: 240 5.9% 10%;
247-
--muted: 240 4.8% 95.9%;
248-
--muted-foreground: 240 3.8% 46.1%;
249-
--accent: 240 4.8% 95.9%;
250-
--accent-foreground: 240 5.9% 10%;
251-
--destructive: 0 84.2% 60.2%;
252-
--destructive-foreground: 0 0% 98%;
253-
--border: 240 5.9% 90%;
254-
--input: 240 5.9% 90%;
255-
--ring: 240 5.9% 10%;
256-
--radius: 0.5rem;
257-
258-
/* ruby_ui especific */
259-
--warning: 38 92% 50%;
260-
--warning-foreground: 0 0% 100%;
261-
--success: 87 100% 37%;
262-
--success-foreground: 0 0% 100%;
263-
}
287+
.dark {
288+
--background: oklch(0.145 0 0);
289+
--foreground: oklch(0.985 0 0);
290+
--card: oklch(0.145 0 0);
291+
--card-foreground: oklch(0.985 0 0);
292+
--popover: oklch(0.145 0 0);
293+
--popover-foreground: oklch(0.985 0 0);
294+
--primary: oklch(0.985 0 0);
295+
--primary-foreground: oklch(0.205 0 0);
296+
--secondary: oklch(0.269 0 0);
297+
--secondary-foreground: oklch(0.985 0 0);
298+
--muted: oklch(0.269 0 0);
299+
--muted-foreground: oklch(0.708 0 0);
300+
--accent: oklch(0.269 0 0);
301+
--accent-foreground: oklch(0.985 0 0);
302+
--destructive: oklch(0.396 0.141 25.723);
303+
--destructive-foreground: oklch(0.637 0.237 25.331);
304+
--border: oklch(0.269 0 0);
305+
--input: oklch(0.269 0 0);
306+
--ring: oklch(0.439 0 0);
307+
--chart-1: oklch(0.488 0.243 264.376);
308+
--chart-2: oklch(0.696 0.17 162.48);
309+
--chart-3: oklch(0.769 0.188 70.08);
310+
--chart-4: oklch(0.627 0.265 303.9);
311+
--chart-5: oklch(0.645 0.246 16.439);
312+
--sidebar: oklch(0.205 0 0);
313+
--sidebar-foreground: oklch(0.985 0 0);
314+
--sidebar-primary: oklch(0.488 0.243 264.376);
315+
--sidebar-primary-foreground: oklch(0.985 0 0);
316+
--sidebar-accent: oklch(0.269 0 0);
317+
--sidebar-accent-foreground: oklch(0.985 0 0);
318+
--sidebar-border: oklch(0.269 0 0);
319+
--sidebar-ring: oklch(0.439 0 0);
320+
321+
/* ruby_ui specific */
322+
--warning: hsl(38 92% 50%);
323+
--warning-foreground: hsl(0 0% 100%);
324+
--success: hsl(84 81% 44%);
325+
--success-foreground: hsl(0 0% 100%);
326+
}
264327
265-
.dark {
266-
--background: 240 10% 3.9%;
267-
--foreground: 0 0% 98%;
268-
--card: 240 10% 3.9%;
269-
--card-foreground: 0 0% 98%;
270-
--popover: 240 10% 3.9%;
271-
--popover-foreground: 0 0% 98%;
272-
--primary: 0 0% 98%;
273-
--primary-foreground: 240 5.9% 10%;
274-
--secondary: 240 3.7% 15.9%;
275-
--secondary-foreground: 0 0% 98%;
276-
--muted: 240 3.7% 15.9%;
277-
--muted-foreground: 240 5% 64.9%;
278-
--accent: 240 3.7% 15.9%;
279-
--accent-foreground: 0 0% 98%;
280-
--destructive: 0 62.8% 30.6%;
281-
--destructive-foreground: 0 0% 98%;
282-
--border: 240 3.7% 15.9%;
283-
--input: 240 3.7% 15.9%;
284-
--ring: 240 4.9% 83.9%;
285-
286-
/* ruby_ui especific */
287-
--warning: 38 92% 50%;
288-
--warning-foreground: 0 0% 100%;
289-
--success: 84 81% 44%;
290-
--success-foreground: 0 0% 100%;
291-
}
328+
@theme inline {
329+
--color-background: var(--background);
330+
--color-foreground: var(--foreground);
331+
--color-card: var(--card);
332+
--color-card-foreground: var(--card-foreground);
333+
--color-popover: var(--popover);
334+
--color-popover-foreground: var(--popover-foreground);
335+
--color-primary: var(--primary);
336+
--color-primary-foreground: var(--primary-foreground);
337+
--color-secondary: var(--secondary);
338+
--color-secondary-foreground: var(--secondary-foreground);
339+
--color-muted: var(--muted);
340+
--color-muted-foreground: var(--muted-foreground);
341+
--color-accent: var(--accent);
342+
--color-accent-foreground: var(--accent-foreground);
343+
--color-destructive: var(--destructive);
344+
--color-destructive-foreground: var(--destructive-foreground);
345+
--color-border: var(--border);
346+
--color-input: var(--input);
347+
--color-ring: var(--ring);
348+
--color-chart-1: var(--chart-1);
349+
--color-chart-2: var(--chart-2);
350+
--color-chart-3: var(--chart-3);
351+
--color-chart-4: var(--chart-4);
352+
--color-chart-5: var(--chart-5);
353+
--radius-sm: calc(var(--radius) - 4px);
354+
--radius-md: calc(var(--radius) - 2px);
355+
--radius-lg: var(--radius);
356+
--radius-xl: calc(var(--radius) + 4px);
357+
--color-sidebar: var(--sidebar);
358+
--color-sidebar-foreground: var(--sidebar-foreground);
359+
--color-sidebar-primary: var(--sidebar-primary);
360+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
361+
--color-sidebar-accent: var(--sidebar-accent);
362+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
363+
--color-sidebar-border: var(--sidebar-border);
364+
--color-sidebar-ring: var(--sidebar-ring);
365+
366+
/* ruby_ui specific */
367+
--color-warning: var(--warning);
368+
--color-warning-foreground: var(--warning-foreground);
369+
--color-success: var(--success);
370+
--color-success-foreground: var(--success-foreground);
292371
}
293372
294373
@layer base {
295374
* {
296-
@apply border-border;
375+
@apply border-border outline-ring/50;
297376
}
298-
299377
body {
300378
@apply bg-background text-foreground;
301-
font-feature-settings: "rlig" 1, "calt" 1;
302-
303-
/* docs specific */
304-
/* https://css-tricks.com/snippets/css/system-font-stack/ */
305-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
306379
}
307380
}
308381
@@ -317,122 +390,21 @@ def default_attrs
317390
steps.add_step do
318391
step_container do
319392
Text(size: "4", weight: "semibold") do
320-
"Install tailwindcss-animate plugin"
393+
"Install tw-animate-css plugin"
321394
end
322395

323396
Text do
324397
plain "Some RubyUI components utilize CSS animations to create smooth transitions."
325398
end
326399

327400
code = <<~CODE
328-
yarn add tailwindcss-animate
401+
yarn add tw-animate-css
329402
CODE
330403
div(class: "w-full") do
331404
Codeblock(code, syntax: :javascript)
332405
end
333406
end
334407
end
335-
336-
steps.add_step do
337-
step_container do
338-
Text(size: "4", weight: "semibold") do
339-
"Include RubyUI TailwindCSS theme"
340-
end
341-
342-
Text do
343-
plain "Include RubyUI theme config in "
344-
InlineCode(class: "whitespace-nowrap") { "tailwind.config.js" }
345-
end
346-
347-
Text do
348-
"Your config file will look like this:"
349-
end
350-
351-
code = <<~JAVASCRIPT
352-
module.exports = {
353-
content: [
354-
'./app/views/**/*.rb', // Phlex views
355-
'./app/components/**/*.rb', // Phlex components
356-
'./app/views/**/*.html.erb',
357-
'./app/helpers/**/*.rb',
358-
'./app/assets/stylesheets/**/*.css',
359-
'./app/javascript/**/*.js'
360-
],
361-
darkMode: ["class"],
362-
theme: {
363-
container: {
364-
center: true,
365-
padding: "2rem",
366-
screens: {
367-
"2xl": "1400px",
368-
},
369-
},
370-
extend: {
371-
colors: {
372-
border: "hsl(var(--border))",
373-
input: "hsl(var(--input))",
374-
ring: "hsl(var(--ring))",
375-
background: "hsl(var(--background))",
376-
foreground: "hsl(var(--foreground))",
377-
primary: {
378-
DEFAULT: "hsl(var(--primary))",
379-
foreground: "hsl(var(--primary-foreground))",
380-
},
381-
secondary: {
382-
DEFAULT: "hsl(var(--secondary))",
383-
foreground: "hsl(var(--secondary-foreground))",
384-
},
385-
destructive: {
386-
DEFAULT: "hsl(var(--destructive))",
387-
foreground: "hsl(var(--destructive-foreground))",
388-
},
389-
muted: {
390-
DEFAULT: "hsl(var(--muted))",
391-
foreground: "hsl(var(--muted-foreground))",
392-
},
393-
accent: {
394-
DEFAULT: "hsl(var(--accent))",
395-
foreground: "hsl(var(--accent-foreground))",
396-
},
397-
popover: {
398-
DEFAULT: "hsl(var(--popover))",
399-
foreground: "hsl(var(--popover-foreground))",
400-
},
401-
card: {
402-
DEFAULT: "hsl(var(--card))",
403-
foreground: "hsl(var(--card-foreground))",
404-
},
405-
/* ruby_ui especific */
406-
warning: {
407-
DEFAULT: "hsl(var(--warning))",
408-
foreground: "hsl(var(--warning-foreground))",
409-
},
410-
success: {
411-
DEFAULT: "hsl(var(--success))",
412-
foreground: "hsl(var(--success-foreground))",
413-
},
414-
},
415-
borderRadius: {
416-
lg: `var(--radius)`,
417-
md: `calc(var(--radius) - 2px)`,
418-
sm: "calc(var(--radius) - 4px)",
419-
},
420-
fontFamily: {
421-
sans: ["var(--font-sans)", 'ui-sans-serif', 'system-ui', 'sans-serif', '"Apple Color Emoji"', '"Segoe UI Emoji"', '"Segoe UI Symbol"', '"Noto Color Emoji"'],
422-
},
423-
},
424-
},
425-
plugins: [
426-
require("tailwindcss-animate"),
427-
],
428-
}
429-
JAVASCRIPT
430-
431-
div(class: "w-full") do
432-
Codeblock(code, syntax: :javascript)
433-
end
434-
end
435-
end
436408
end
437409
end
438410
end

0 commit comments

Comments
 (0)