Adds Tailwind v4 support

[Eveeifyeve]

PR ONHOLD: commit about it here

This PR is for the offical support for tailwind v4

Changes

• Adds changes to package.json to export the new v4 changes and adds @tailwind/vite package.
• Adds v4.ts and base-v4.css for tailwind v4 support.

Testing

Testing done. Only type errors for AstroIntergration, config, updateConfig and injectScript.

Docs

You will need to update the docs to tell people how to use the v4 edition of the TailwindCSS to change the import to@astrojs/tailwind/v4

[changeset-bot]

🦋 Changeset detected

Latest commit: 18cb0dc

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

[Eveeifyeve]

I have talked it out the the discord under #contribute channel it has come to a conclusion that @alexanderniebuhr and help from @Fryuni was correct about the sizing, but:

A. I can't measure the size clearly
B. It's a issue with vite and rollup

Resources Looked at:

• Rollup hook: generateBundle()
• Rollup hook: writeBundle()
• Astro Perposal: InjectScript to target subset of pages
• Astro Intergration API: InjectScript Option

[Eveeifyeve]

Well all of the code LGTM. I can't wait till I can use tailwind v4 in astro!

[bluwy]

This was discussed in the #contribute channel yesterday, and there was discussion of maybe deprecating/removing applyBaseStyles, which makes even more sense for tailwind v4 since the config is in a CSS file.

In which case, do we need an Astro integration that simply applies the @tailwind/vite plugin? Users can do that themselves in the vite.plugins config option which requires equal amount of code.

[Eveeifyeve]

Well we still need the extensions cause less code = less cluttered and most people perfer to use the integrations I felt like we could just make it add a tw.css file to css and make index page import it.

[Eveeifyeve]

Yeah I get the reason why but at the same time wouldn't users rather have a command to add the part that does it for them, cause remember developers are lazy. Lets take this in a scenario where you are a developer using a framework do you want to use a simple command that does for you or do you want to hard code it by your self which takes more time. Which one would you choose?

[Eveeifyeve]

Plus compatibility with sass/scss requires one file for my end for every project to add tailwind support.

rather I can use a plugin/intergration that add @import "tailwindcss" for me without using a css file. Cause sass/scss is not compatible with tailwind what so ever since sass/scss requires you to have a sass/scss file not a library

[Eveeifyeve]

I have started a thread in the discord to talk about this extensively but I really agree to a comment from the #contibute channel from @alexanderniebuhr saying maybe we should still keep it there but tell the user to import it

[Eveeifyeve]

The PR Is ON HOLD since it's not really required as Tailwind v4 Is in alpha when Tailwind V4 is in schedule for it's beta or stable release we would reconsider the implementation. For now if you want to use tailwind v4 I would use the astro-tailwind-v4 community intergration for now.

Any more discussions can be located on the discord thread here for any issues, questions or other things about tailwind v4 support

[bluwy]

Let's wait for tailwind v4 to stabilise, or until there's a reason v4 requires additional Astro setup before add some support for it. Closing this for now.