Migrate from Windi to Tailwind #4614
Conversation
pat-s
added
refactor
|
Deployment of preview was successful: https://woodpecker-ci-woodpecker-pr-4614.surge.sh |
pat-s
force-pushed
the
refactor/windi-to-tailwind
branch
from
15912d6 to
6e64b94
Compare
.yamllint.yaml
Outdated
| @@ -6,6 +6,7 @@ ignore-from-file: | |||
| - .gitignore | |||
| - server/store/datastore/migration/test-files/.gitignore | |||
| - web/.gitignore | |||
| - web/pnpm-lock.yaml | |||
There was a problem hiding this comment.
This is actually list of files from where ignores are read and not a list of ignored files.
There's a different key for ignored files, and you could also add the docs lockfile
There was a problem hiding this comment.
Unfortunately ignore and ignore-from-file are mutually exclusive. Suggesting to go with ignore.
package.json
Outdated
There was a problem hiding this comment.
You ran pnpm in the wrong directory? ;)
| @@ -67,3 +63,9 @@ const { doSubmit: repairRepos, isLoading: isRepairingRepos } = useAsyncAction(as | |||
| notifications.notify({ title: i18n.t('admin.settings.repos.repair.success'), type: 'success' }); | |||
| }); | |||
| </script> | |||
|
|
|||
| <style scoped> | |||
| .admin-repos { | |||
There was a problem hiding this comment.
Why do we need this class? If I see it correctly it's only used once
There was a problem hiding this comment.
The ListItem class item is used in the "repo list" and "admin repos" list (in the admin settings). Both have different paddings p-0 and p-4 currently. These differences are not directly respected with tailwind as the overrides are not applied in the same way.
The (only) approach that worked was to use scoped CSS classes instead of competing tailwind classes. This was also recommended by AI.
Not sure why it worked in Windi in the first place.
There might be additional cases in which such scoped classes could be of help. Currently, many subelements are a collection of competing tailwind classes merged in from parent objects. It is often unclear which one actually take precedence. AFAIU, with scoped classes, these always take precedence.
| import svgLoader from 'vite-svg-loader'; | ||
| import { defineConfig } from 'vitest/config'; |
There was a problem hiding this comment.
Did you change this because of the tsc failure?
There was a problem hiding this comment.
No, did that before your change. Just followed the official docs how to use vite with tailwind.
superseedes #3279
fixes #2194
Had to add some scoped classes to resolve some padding and override clashes.
In addition, some width and height specifiers had to be changed as they are different between windi and tailwind.