Upgrade tailwind (3.4.* to 4.1.*) and @astrojs/tailwind (5.1.* to 6.*) #1050
Description
Context
The Engineering Kiosk website uses tailwind. Back then we used a ready-made template, which comes with a rather extensive config: https://github.com/EngineeringKiosk/webpage/blob/main/tailwind.config.cjs
Now tailwind v4 is out and this kind of config is deprecated, but still supported. Nevertheless, we would like to migrate it to the new type of config so that you don't have the stress with v5, see https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file
There is an update tool, see https://tailwindcss.com/docs/upgrade-guide#using-the-upgrade-tool, but it only works moderately well for such a complex config.
Goal of this task
- Upgrade tailwind (3.4.* to 4.1.*)
- Upgrade @astrojs/tailwind (5.1.* to 6.*) or better ... replacing this with the Vite plugin
Success criteria
- The website looks and works like before
Dependabot
Dependabot itself suggests Pull Requests to upgrade, see #1043 and #1021
The upgrades don't only include tailwind, but also @astrojs/tailwind.
It could be that the links above don't show an open Pull Request anymore, as dependabot keeps suggesting the newest version. Please look out for tailwind related PRs in https://github.com/EngineeringKiosk/webpage/pulls
tailwind default configurations
- v4: https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/theme.css
- v3: https://github.com/tailwindlabs/tailwindcss/blob/v3.4.17/stubs/config.full.js
@astrojs/tailwind
As this website is using astro (https://astro.build/), there is also a change in the tailwind integration, see https://github.com/withastro/astro/blob/%40astrojs/tailwind%406.0.2/packages/integrations/tailwind/CHANGELOG.md#600
withastro/astro#13049 2ed4bd9 Thanks @florian-lefebvre! - Deprecates the integration
Tailwind CSS now offers a Vite plugin which is the preferred way to use Tailwind 4 in Astro. Please uninstall @astrojs/tailwind and follow the Tailwind documentation for manual installation.
This updated major version is only provided as a convenience for existing projects until they are able to migrate to the new plugin. It offers no additional functionality and is no longer recommended, but may continue to be used in your projects until it is removed entirely.
Additional resources
- tailwindcss - Install Tailwind CSS with Astro: https://tailwindcss.com/docs/installation/framework-guides/astro
- Astro 5.2 - Tailwind 4 support: https://astro.build/blog/astro-520/#tailwind-4-support
- tailwindcss - Upgrading your Tailwind CSS projects from v3 to v4.: https://tailwindcss.com/docs/upgrade-guide
- Some blog - How to Upgrade Your Astro Site to Tailwind v4: https://bhdouglass.com/blog/how-to-upgrade-your-astro-site-to-tailwind-v4/
- tailwindcss - Using a JavaScript config file: https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file
- Migration to v4 css based config #13813: Migration to v4 css based config tailwindlabs/tailwindcss#13813