mirror of
https://github.com/wasp-lang/wasp.git
synced 2024-12-26 10:35:04 +03:00
Migrating Tailwind setup (#1806)
This commit is contained in:
parent
49fe129adb
commit
f3428c7412
@ -301,14 +301,65 @@ directory `foo`, you should:
|
||||
`foo/.gitignore`
|
||||
13. Copy the rest of the top-level files and folders (all of them except for `.gitignore`, `main.wasp` and `src/`)
|
||||
in `foo_old/` into `foo/` (overwrite the existing files in `foo`).
|
||||
14. Run `wasp clean`.
|
||||
14. Run `wasp clean` in `foo`.
|
||||
15. Delete the `foo_old` directory.
|
||||
|
||||
</div>
|
||||
</details>
|
||||
|
||||
That's it! You now have a properly structured Wasp 0.12.0 project in the `foo` directory.
|
||||
Your app probably doesn't quite work yet due to the breaking changes in Auth, which we will migrate next.
|
||||
Your app probably doesn't quite work yet due to some other changes in Wasp 0.12.0, but we'll get to that in the next sections.
|
||||
|
||||
### Migrating the Tailwind Setup
|
||||
|
||||
:::note
|
||||
If you don't use Tailwind in your projet, you can skip this section.
|
||||
:::
|
||||
|
||||
There is a small change in how the `tailwind.config.cjs` needs to be defined in Wasp 0.12.0.
|
||||
|
||||
You'll need to wrap all your paths in the `content` field with the `resolveProjectPath` function. This makes sure that the paths are resolved correctly when generating your CSS.
|
||||
|
||||
Here's how you can do it:
|
||||
|
||||
<Tabs>
|
||||
<TabItem value="before" label="Before">
|
||||
|
||||
```js title="tailwind.config.cjs"
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
// highlight-next-line
|
||||
'./src/**/*.{js,jsx,ts,tsx}',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
</TabItem>
|
||||
|
||||
<TabItem value="after" label="After">
|
||||
|
||||
```js title="tailwind.config.cjs"
|
||||
// highlight-next-line
|
||||
const { resolveProjectPath } = require('wasp/dev')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
// highlight-next-line
|
||||
resolveProjectPath('./src/**/*.{js,jsx,ts,tsx}'),
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
||||
### Migrating to the New Auth
|
||||
As shown in [the previous section](#new-auth), Wasp significantly changed how authentication works in version 0.12.0.
|
||||
|
Loading…
Reference in New Issue
Block a user