Tailwind 4 migration

[amazingphilippe]

Summary | Résumé

Upgrading to tailwind 4 and vite

• Vite is ... quick. The compilation is very efficient and takes a fraction of a second. It compiles on save, so you can start the development server and forget about npm run tailwind when writing css and html
• There are a few things I had to fix after the upgrade:
• .container is not a utility provided by tailwind by default, but we can create our own.
• @screen function has been replaced by @variant
• Linting is more efficient, so I had to fix some invalid utilities in some @apply blocks
• No more tailwind.config.js - Its all a css theme, and integrates perfectly with native css properties. CS properties are available everywhere, not just using tailwind utilities.

Test instructions | Instructions pour tester la modification

• Locally, npm install
• Maybe rebuild the container
• npm run css does the build, but it also runs on make run-dev

[github-actions]

🧪 Review environment

https://ssvufeccqxzogw6mf4vqmdf4ae0eleuz.lambda-url.ca-central-1.on.aws/

[amazingphilippe]

It picked up this syntax error that previously went unnoticed

[amazingphilippe]

Open the diff below in style.css to see tailwind 4's config

[amazingphilippe]

An example of using tailwind tokens as regular CSS properties