Skip to content

Commit 5d09c73

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

File tree

2 files changed

+228
-1
lines changed

2 files changed

+228
-1
lines changed

‎UPGRADE_GUIDE.md

+227
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,232 @@
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+
Don't forget to run:
34+
35+
```bash
36+
mix tailwind.install
37+
```
38+
39+
`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`:
40+
41+
```CSS
42+
@config "../tailwind.config.js";
43+
```
44+
45+
Now you should be able to follow the [Tailwind upgrade guide](https://tailwindcss.com/docs/upgrade-guide) to update your project.
46+
47+
### Petal Components CSS configuration
48+
49+
Here are some tips on how to integrate Petal Components if you are no longer using the `tailwind.config.js` file.
50+
51+
To reference Petal Components CSS and include it a source for Tailwind utility classes, use the `@source` and `@import` directives:
52+
53+
```CSS
54+
@import "tailwindcss";
55+
56+
@source "../../deps/petal_components/**/*.*ex";
57+
@import "../../deps/petal_components/assets/default.css";
58+
```
59+
60+
The CSS file equivalent of `darkMode: 'class'` is:
61+
62+
```CSS
63+
@custom-variant dark (&:where(.dark, .dark *));
64+
```
65+
66+
To configure Petal Component colours add an `@import` to the CSS file:
67+
68+
```CSS
69+
@import "./colors.css";
70+
```
71+
72+
Then create the `colors.css` file:
73+
74+
```CSS
75+
@theme inline {
76+
--color-primary-50: var(--color-blue-50);
77+
--color-primary-100: var(--color-blue-100);
78+
--color-primary-200: var(--color-blue-200);
79+
--color-primary-300: var(--color-blue-300);
80+
--color-primary-400: var(--color-blue-400);
81+
--color-primary-500: var(--color-blue-500);
82+
--color-primary-600: var(--color-blue-600);
83+
--color-primary-700: var(--color-blue-700);
84+
--color-primary-800: var(--color-blue-800);
85+
--color-primary-900: var(--color-blue-900);
86+
--color-primary-950: var(--color-blue-950);
87+
88+
--color-secondary-50: var(--color-pink-50);
89+
--color-secondary-100: var(--color-pink-100);
90+
--color-secondary-200: var(--color-pink-200);
91+
--color-secondary-300: var(--color-pink-300);
92+
--color-secondary-400: var(--color-pink-400);
93+
--color-secondary-500: var(--color-pink-500);
94+
--color-secondary-600: var(--color-pink-600);
95+
--color-secondary-700: var(--color-pink-700);
96+
--color-secondary-800: var(--color-pink-800);
97+
--color-secondary-900: var(--color-pink-900);
98+
--color-secondary-950: var(--color-pink-950);
99+
100+
--color-success-50: var(--color-green-50);
101+
--color-success-100: var(--color-green-100);
102+
--color-success-200: var(--color-green-200);
103+
--color-success-300: var(--color-green-300);
104+
--color-success-400: var(--color-green-400);
105+
--color-success-500: var(--color-green-500);
106+
--color-success-600: var(--color-green-600);
107+
--color-success-700: var(--color-green-700);
108+
--color-success-800: var(--color-green-800);
109+
--color-success-900: var(--color-green-900);
110+
--color-success-950: var(--color-green-950);
111+
112+
--color-danger-50: var(--color-red-50);
113+
--color-danger-100: var(--color-red-100);
114+
--color-danger-200: var(--color-red-200);
115+
--color-danger-300: var(--color-red-300);
116+
--color-danger-400: var(--color-red-400);
117+
--color-danger-500: var(--color-red-500);
118+
--color-danger-600: var(--color-red-600);
119+
--color-danger-700: var(--color-red-700);
120+
--color-danger-800: var(--color-red-800);
121+
--color-danger-900: var(--color-red-900);
122+
--color-danger-950: var(--color-red-950);
123+
124+
--color-warning-50: var(--color-yellow-50);
125+
--color-warning-100: var(--color-yellow-100);
126+
--color-warning-200: var(--color-yellow-200);
127+
--color-warning-300: var(--color-yellow-300);
128+
--color-warning-400: var(--color-yellow-400);
129+
--color-warning-500: var(--color-yellow-500);
130+
--color-warning-600: var(--color-yellow-600);
131+
--color-warning-700: var(--color-yellow-700);
132+
--color-warning-800: var(--color-yellow-800);
133+
--color-warning-900: var(--color-yellow-900);
134+
--color-warning-950: var(--color-yellow-950);
135+
136+
--color-info-50: var(--color-sky-50);
137+
--color-info-100: var(--color-sky-100);
138+
--color-info-200: var(--color-sky-200);
139+
--color-info-300: var(--color-sky-300);
140+
--color-info-400: var(--color-sky-400);
141+
--color-info-500: var(--color-sky-500);
142+
--color-info-600: var(--color-sky-600);
143+
--color-info-700: var(--color-sky-700);
144+
--color-info-800: var(--color-sky-800);
145+
--color-info-900: var(--color-sky-900);
146+
--color-info-950: var(--color-sky-950);
147+
148+
--color-gray-50: var(--color-slate-50);
149+
--color-gray-100: var(--color-slate-100);
150+
--color-gray-200: var(--color-slate-200);
151+
--color-gray-300: var(--color-slate-300);
152+
--color-gray-400: var(--color-slate-400);
153+
--color-gray-500: var(--color-slate-500);
154+
--color-gray-600: var(--color-slate-600);
155+
--color-gray-700: var(--color-slate-700);
156+
--color-gray-800: var(--color-slate-800);
157+
--color-gray-900: var(--color-slate-900);
158+
--color-gray-950: var(--color-slate-950);
159+
}
160+
```
161+
162+
To add the "typography" and "form" plug-ins, add the following to the CSS file:
163+
164+
```CSS
165+
@plugin "@tailwindcss/typography";
166+
@plugin "@tailwindcss/forms";
167+
```
168+
169+
To re-create the heroicons JavaScript, you'll need add this to the CSS file:
170+
171+
```CSS
172+
@plugin "./tailwind_heroicons.js";
173+
```
174+
175+
Then create the `tailwind_heroicons.js` file:
176+
177+
```JavaScript
178+
const plugin = require("tailwindcss/plugin");
179+
const fs = require("fs");
180+
const path = require("path");
181+
182+
// Embeds Heroicons (https://heroicons.com) into your app.css bundle
183+
// See your `CoreComponents.icon/1` for more information.
184+
module.exports = plugin(function ({ matchComponents, theme }) {
185+
let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized");
186+
let values = {};
187+
let icons = [
188+
["", "/24/outline"],
189+
["-solid", "/24/solid"],
190+
["-mini", "/20/solid"],
191+
["-micro", "/16/solid"],
192+
];
193+
icons.forEach(([suffix, dir]) => {
194+
fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
195+
let name = path.basename(file, ".svg") + suffix;
196+
values[name] = { name, fullPath: path.join(iconsDir, dir, file) };
197+
});
198+
});
199+
matchComponents(
200+
{
201+
hero: ({ name, fullPath }) => {
202+
let content = fs
203+
.readFileSync(fullPath)
204+
.toString()
205+
.replace(/\r?\n|\r/g, "");
206+
let size = theme("spacing.6");
207+
if (name.endsWith("-mini")) {
208+
size = theme("spacing.5");
209+
} else if (name.endsWith("-micro")) {
210+
size = theme("spacing.4");
211+
}
212+
return {
213+
[`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
214+
"-webkit-mask": `var(--hero-${name})`,
215+
mask: `var(--hero-${name})`,
216+
"mask-repeat": "no-repeat",
217+
"background-color": "currentColor",
218+
"vertical-align": "middle",
219+
display: "inline-block",
220+
width: size,
221+
height: "1lh",
222+
};
223+
},
224+
},
225+
{ values },
226+
);
227+
});
228+
```
229+
3230
## v1.4 to v1.5
4231

5232
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)