Skip to content

Commit a065303

Browse files
mitkinsmitkins
committed
Update upgrade guide
1 parent dea2016 commit a065303

File tree

2 files changed

+226
-1
lines changed

2 files changed

+226
-1
lines changed

‎UPGRADE_GUIDE.md

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

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