Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(tailwind): support v4 #13049

Open
wants to merge 29 commits into
base: main
Choose a base branch
from
Open

feat(tailwind): support v4 #13049

wants to merge 29 commits into from
+547 −265

Conversation

florian-lefebvre
Copy link
Member

@florian-lefebvre florian-lefebvre commented Jan 23, 2025 •
edited
Loading

Changes

  • Closes PLT-2759
  • Supports tailwind v4 (breaking change, this major only supports v4)
  • Drops support for astro <= 5.0 (we rely on some 5.0 only features)
  • Removes the nesting option as it's supported oob

Testing

Updated, should pass, and tested manually

Docs

Changeset, withastro/docs#10773

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jan 23, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: f620e48

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added the pkg: integration Related to any renderer integration (scope) label Jan 23, 2025
florian-lefebvre
florian-lefebvre commented Jan 23, 2025
View reviewed changes
packages/integrations/tailwind/src/index.ts Outdated
}

const url = new URL('tailwind.css', codegenDir);
writeFileSync(url, content, 'utf-8');
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wish I could use a virtual module but it didn't work with vite nor postcss

@github-actions github-actions bot added the pkg: astro Related to the core `astro` package (scope) label Jan 23, 2025
@codspeed-hq CodSpeed HQ
Copy link

codspeed-hq bot commented Jan 23, 2025 •
edited
Loading

CodSpeed Performance Report

Merging #13049 will not alter performance

Comparing feat/tailwind-v4 (f620e48) with main (e36837f)

Summary

✅ 6 untouched benchmarks

@github-actions github-actions bot added the pkg: example Related to an example package (scope) label Jan 23, 2025
@florian-lefebvre florian-lefebvre marked this pull request as ready for review January 23, 2025 15:03
@florian-lefebvre florian-lefebvre mentioned this pull request Jan 23, 2025
Open
@Eveeifyeve
Copy link

Welp I wasted my time on pr #10376....

@florian-lefebvre
Copy link
Member Author

Sorry about that! Taiwind is critial because it's really popular and there were more things to do than your initial PR so we decided to take care of it. I'll add you as a co-author

@xsjcTony
Copy link

By reading through the PR, so basically npx astro add tailwind will just install @tailwindcss/vite and add it to the vite plugin list.
But I also see some changes in @astrojs/tailwind integration package. What does that package do in this scenario?

@florian-lefebvre
Copy link
Member Author

I'll quote the changeset:

Drops support for Astro <= 5.0 and Tailwind <= 4.0

Tailwind CSS now offers a Vite plugin so this version of the integration is provided as a convenience if you're unable to upgrade to the Vite plugin at this time. Otherwise, we recommend you uninstall the integration and follow the Tailwind documentation.

Note the nesting option is removed as it's supported out of the box.

So this version of the integration will act as a migration bridge (eg. it references the js config file for you) and be deprecated later

@xsjcTony
Copy link

Cheers. I'm just too dumb that I carefully read everything but missed the first ever file😥. Thanks

ematipico
ematipico approved these changes Jan 24, 2025
View reviewed changes
packages/integrations/tailwind/src/index.ts Outdated Show resolved Hide resolved
@florian-lefebvre
Copy link
Member Author

@sarah11918 I updated the changeset to match the docs aside content

@ematipico ematipico added this to the 5.2.0 milestone Jan 24, 2025
@ematipico
Copy link
Member

Added this PR to the 5.2.0 milestone :) even though it's not part of core, it feels it deserve some spotlight

@florian-lefebvre
Copy link
Member Author

Update: the next major of the integration will just be used for deprecation, we recommend you use the vite plugin directly

@florian-lefebvre florian-lefebvre marked this pull request as draft January 24, 2025 15:39
@github-actions github-actions bot removed the pkg: integration Related to any renderer integration (scope) label Jan 27, 2025
@florian-lefebvre florian-lefebvre marked this pull request as ready for review January 27, 2025 12:56
@ematipico ematipico requested a review from sarah11918 January 27, 2025 14:17
sarah11918
sarah11918 reviewed Jan 27, 2025
View reviewed changes
Copy link
Member

@sarah11918 sarah11918 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just left a bit more of a "strongly worded" suggestion for the changeset! 😄

.changeset/curvy-penguins-act.md Outdated Show resolved Hide resolved
sarah11918
sarah11918 approved these changes Jan 28, 2025
View reviewed changes
Copy link
Member

@sarah11918 sarah11918 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving for docs! Everyone will be so happy about this @florian-lefebvre 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@JusticeMatthew JusticeMatthew JusticeMatthew left review comments

@HiDeoo HiDeoo HiDeoo left review comments

@sarah11918 sarah11918 sarah11918 approved these changes

@ematipico ematipico ematipico approved these changes

Assignees
No one assigned
Labels
pkg: astro Related to the core `astro` package (scope) pkg: example Related to an example package (scope)
Projects
None yet
Milestone
5.2.0
Development

Successfully merging this pull request may close these issues.
7 participants
@florian-lefebvre @Eveeifyeve @xsjcTony @ematipico @HiDeoo @sarah11918 @JusticeMatthew