chore(docs): bump to tailwind 4.0 #1327
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
iainlane
force-pushed
the
iainlane/tailwind-4
branch
from
40b4977 to
cf425bd
Compare
|
iainlane
force-pushed
the
iainlane/tailwind-4
branch
4 times, most recently
from
5fbe1ed to
f6cc2ed
Compare
This is [a new major version of Tailwind CSS][release-announcement], which includes a lot of breaking changes. This commit updates the project to use the new version. A lot of changes were required to accommodate this. We drop the `@astrojs/tailwind` plugin since it's not been ported to 4.0 yet. What that does is bridge between Starlight and Tailwind, and this is something we can do manually by taking the few definitions that are needed. As this implies, the way Tailwind works has changed a fair bit. There's no Javascript config file any more - it's all done in CSS instead. So the configuration has had an overhaul. Some of the classes have changed too. This, and the dropping of the plugin, meant that the styles broke a bit. We have ported to be more Tailwind-native to fix this. This means dropping most of the inline css `<style>` blocks in our components and using the Tailwind native utililty classes instead. The notable exception is the `TableOfContentsList` component which is quite custom and so is left for later. There are some minor visual differences but overall it should look broadly the same. Finally, we've installed some Prettier plugins for Astro and Tailwind, and ran the code through them. [release-announcement]: https://blog.tailwindcss.com/tailwindcss-v4
iainlane
force-pushed
the
iainlane/tailwind-4
branch
from
f6cc2ed to
4987d8e
Compare
zerok
approved these changes
Jan 29, 2025
There was a problem hiding this comment.
Looks great! Thank you for doing this!
Just some minor things I've noticed:
- On mobile I noticed different padding in the top-nav bar
- The "Kubernetes" and "Jsonnet" links on the frontpage have a different color (now orange, previously purple/blue). IMO the new color is better.
Both are fine IMO 🙂
|
Yeah I thought the orange was nicer and a bit more consistent 😁 thanks! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is a new major version of Tailwind CSS, which includes a lot of breaking changes. This commit updates the project to use the new version.
A lot of changes were required to accommodate this. We drop the
@astrojs/tailwindplugin since it's not been ported to 4.0 yet. What that does is bridge between Starlight and Tailwind, and this is something we can do manually by taking the few definitions that are needed.As this implies, the way Tailwind works has changed a fair bit. There's no Javascript config file any more - it's all done in CSS instead. So the configuration has had an overhaul.
Some of the classes have changed too. This, and the dropping of the plugin, meant that the styles broke a bit. We have ported to be more Tailwind-native to fix this. This means dropping most of the inline css
<style>blocks in our components and using the Tailwind native utililty classes instead. The notable exception is theTableOfContentsListcomponent which is quite custom and so is left for later.There are some minor visual differences but overall it should look broadly the same.
Finally, we've installed some Prettier plugins for Astro and Tailwind, and ran the code through them.