Skip to content

Commit 5c7e89f

Browse files
mitkinsmitkins
committed
Update upgrade guide
1 parent dea2016 commit 5c7e89f

File tree

2 files changed

+216
-1
lines changed

2 files changed

+216
-1
lines changed

‎UPGRADE_GUIDE.md

+215
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,220 @@
11
# Upgrade Guide
22

3+
## v2.8.4 to v2.9.0
4+
5+
Petal Components has been upgraded to Tailwind 4. Some utilities have been removed or renamed. See the [Tailwind upgrade guide](https://tailwindcss.com/docs/upgrade-guide) for more information.
6+
7+
To upgrade to Tailwind 4 in your project, make sure you update `mix.exs`:
8+
9+
```diff
10+
- {:tailwind, "~> 0.2", runtime: Mix.env() == :dev}
11+
+ {:tailwind, "~> 0.3", runtime: Mix.env() == :dev}
12+
```
13+
14+
And `config.exs` (note that the paths have changed and that you need 4.0.9 or above):
15+
16+
```diff
17+
config :tailwind,
18+
- version: "3.3.3",
19+
+ version: "4.0.9",
20+
default: [
21+
args: ~w(
22+
- --config=tailwind.config.js
23+
- --input=css/app.css
24+
- --output=../priv/static/assets/app.css
25+
+ --input=assets/css/app.css
26+
+ --output=priv/static/assets/app.css
27+
),
28+
- cd: Path.expand("../assets", __DIR__)
29+
+ cd: Path.expand("..", __DIR__)
30+
]
31+
```
32+
33+
`tailwind.config.js` is now considered legacy and is no longer automatically loaded. However, it is still supported and you can manually load it by adding the following to your `app.css`:
34+
35+
```CSS
36+
@config "../tailwind.config.js";
37+
```
38+
39+
Now you should be able to follow the [Tailwind upgrade guide](https://tailwindcss.com/docs/upgrade-guide) to update your project.
40+
41+
Here are some tips on how to integrate Petal Components if you are no longer using the `tailwind.config.js` file.
42+
43+
To reference Petal Components CSS, use the `@source` and `@import` directives:
44+
45+
```CSS
46+
@import "tailwindcss";
47+
48+
@source "../../deps/petal_components/**/*.*ex";
49+
@import "../../deps/petal_components/assets/default.css";
50+
51+
@plugin "@tailwindcss/typography";
52+
@plugin "@tailwindcss/forms";
53+
```
54+
55+
The CSS file equivalent of `darkMode: 'class'`:
56+
57+
```CSS
58+
@custom-variant dark (&:where(.dark, .dark *));
59+
```
60+
61+
To add the Petal Component colours add an `@import` to the CSS file:
62+
63+
```CSS
64+
@import "./colors.css";
65+
```
66+
67+
You'll also need to add the `colors.css` file:
68+
69+
```CSS
70+
@theme inline {
71+
--color-primary-50: var(--color-blue-50);
72+
--color-primary-100: var(--color-blue-100);
73+
--color-primary-200: var(--color-blue-200);
74+
--color-primary-300: var(--color-blue-300);
75+
--color-primary-400: var(--color-blue-400);
76+
--color-primary-500: var(--color-blue-500);
77+
--color-primary-600: var(--color-blue-600);
78+
--color-primary-700: var(--color-blue-700);
79+
--color-primary-800: var(--color-blue-800);
80+
--color-primary-900: var(--color-blue-900);
81+
--color-primary-950: var(--color-blue-950);
82+
83+
--color-secondary-50: var(--color-pink-50);
84+
--color-secondary-100: var(--color-pink-100);
85+
--color-secondary-200: var(--color-pink-200);
86+
--color-secondary-300: var(--color-pink-300);
87+
--color-secondary-400: var(--color-pink-400);
88+
--color-secondary-500: var(--color-pink-500);
89+
--color-secondary-600: var(--color-pink-600);
90+
--color-secondary-700: var(--color-pink-700);
91+
--color-secondary-800: var(--color-pink-800);
92+
--color-secondary-900: var(--color-pink-900);
93+
--color-secondary-950: var(--color-pink-950);
94+
95+
--color-success-50: var(--color-green-50);
96+
--color-success-100: var(--color-green-100);
97+
--color-success-200: var(--color-green-200);
98+
--color-success-300: var(--color-green-300);
99+
--color-success-400: var(--color-green-400);
100+
--color-success-500: var(--color-green-500);
101+
--color-success-600: var(--color-green-600);
102+
--color-success-700: var(--color-green-700);
103+
--color-success-800: var(--color-green-800);
104+
--color-success-900: var(--color-green-900);
105+
--color-success-950: var(--color-green-950);
106+
107+
--color-danger-50: var(--color-red-50);
108+
--color-danger-100: var(--color-red-100);
109+
--color-danger-200: var(--color-red-200);
110+
--color-danger-300: var(--color-red-300);
111+
--color-danger-400: var(--color-red-400);
112+
--color-danger-500: var(--color-red-500);
113+
--color-danger-600: var(--color-red-600);
114+
--color-danger-700: var(--color-red-700);
115+
--color-danger-800: var(--color-red-800);
116+
--color-danger-900: var(--color-red-900);
117+
--color-danger-950: var(--color-red-950);
118+
119+
--color-warning-50: var(--color-yellow-50);
120+
--color-warning-100: var(--color-yellow-100);
121+
--color-warning-200: var(--color-yellow-200);
122+
--color-warning-300: var(--color-yellow-300);
123+
--color-warning-400: var(--color-yellow-400);
124+
--color-warning-500: var(--color-yellow-500);
125+
--color-warning-600: var(--color-yellow-600);
126+
--color-warning-700: var(--color-yellow-700);
127+
--color-warning-800: var(--color-yellow-800);
128+
--color-warning-900: var(--color-yellow-900);
129+
--color-warning-950: var(--color-yellow-950);
130+
131+
--color-info-50: var(--color-sky-50);
132+
--color-info-100: var(--color-sky-100);
133+
--color-info-200: var(--color-sky-200);
134+
--color-info-300: var(--color-sky-300);
135+
--color-info-400: var(--color-sky-400);
136+
--color-info-500: var(--color-sky-500);
137+
--color-info-600: var(--color-sky-600);
138+
--color-info-700: var(--color-sky-700);
139+
--color-info-800: var(--color-sky-800);
140+
--color-info-900: var(--color-sky-900);
141+
--color-info-950: var(--color-sky-950);
142+
143+
--color-gray-50: var(--color-slate-50);
144+
--color-gray-100: var(--color-slate-100);
145+
--color-gray-200: var(--color-slate-200);
146+
--color-gray-300: var(--color-slate-300);
147+
--color-gray-400: var(--color-slate-400);
148+
--color-gray-500: var(--color-slate-500);
149+
--color-gray-600: var(--color-slate-600);
150+
--color-gray-700: var(--color-slate-700);
151+
--color-gray-800: var(--color-slate-800);
152+
--color-gray-900: var(--color-slate-900);
153+
--color-gray-950: var(--color-slate-950);
154+
}
155+
```
156+
157+
To re-create the heroicons JavaScript, you'll need to create a plug-in. Add this to the CSS file:
158+
159+
```CSS
160+
@plugin "./tailwind_heroicons.js";
161+
```
162+
163+
And here's the plug-in itself `tailwind_heroicons.js`:
164+
165+
```JavaScript
166+
const plugin = require("tailwindcss/plugin");
167+
const fs = require("fs");
168+
const path = require("path");
169+
170+
// Embeds Heroicons (https://heroicons.com) into your app.css bundle
171+
// See your `CoreComponents.icon/1` for more information.
172+
module.exports = plugin(function ({ matchComponents, theme }) {
173+
let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized");
174+
let values = {};
175+
let icons = [
176+
["", "/24/outline"],
177+
["-solid", "/24/solid"],
178+
["-mini", "/20/solid"],
179+
["-micro", "/16/solid"],
180+
];
181+
icons.forEach(([suffix, dir]) => {
182+
fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
183+
let name = path.basename(file, ".svg") + suffix;
184+
values[name] = { name, fullPath: path.join(iconsDir, dir, file) };
185+
});
186+
});
187+
matchComponents(
188+
{
189+
hero: ({ name, fullPath }) => {
190+
let content = fs
191+
.readFileSync(fullPath)
192+
.toString()
193+
.replace(/\r?\n|\r/g, "");
194+
let size = theme("spacing.6");
195+
if (name.endsWith("-mini")) {
196+
size = theme("spacing.5");
197+
} else if (name.endsWith("-micro")) {
198+
size = theme("spacing.4");
199+
}
200+
return {
201+
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
202+
"-webkit-mask": `var(--hero-${name})`,
203+
mask: `var(--hero-${name})`,
204+
"mask-repeat": "no-repeat",
205+
"background-color": "currentColor",
206+
"vertical-align": "middle",
207+
display: "inline-block",
208+
width: size,
209+
height: "1lh",
210+
};
211+
},
212+
},
213+
{ values },
214+
);
215+
});
216+
```
217+
3218
## v1.4 to v1.5
4219

5220
v1.5 requires Tailwind v3.3.3. Update the version in `config.exs`:

‎assets/default.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -2543,7 +2543,7 @@
25432543
@apply border-danger-500! rounded-md! focus:border-danger-500! text-danger-900! placeholder-danger-700! bg-danger-50! file:border-none! dark:border-none! dark:bg-gray-950! dark:text-danger-400;
25442544
}
25452545

2546-
/* If in tailwind.config.json, darkMode: 'class', use this: */
2546+
/* If in tailwind config, darkMode: 'class', use this: */
25472547
.dark ::-webkit-calendar-picker-indicator {
25482548
filter: invert(1);
25492549
}

0 commit comments

Comments
 (0)