feat: tailwind v4

[florian-lefebvre]

Description (required)

Related PR: withastro/astro#13049

Related issues & labels (optional)

• Closes #
• Suggested label:

[astrobot-houston]

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
en/guides/fonts.mdx	Source changed, localizations will be marked as outdated.
en/guides/integrations-guide/lit.mdx	Source changed, localizations will be marked as outdated.
en/guides/integrations-guide/tailwind.mdx	Source changed, localizations will be marked as outdated.
en/guides/migrate-to-astro/from-create-react-app.mdx	Source changed, localizations will be marked as outdated.
en/guides/migrate-to-astro/from-gatsby.mdx	Source changed, localizations will be marked as outdated.
en/guides/migrate-to-astro/from-nextjs.mdx	Source changed, localizations will be marked as outdated.
en/guides/styling.mdx	Source changed, localizations will be marked as outdated.
en/recipes/tailwind-rendered-markdown.mdx	Source changed, localizations will be marked as outdated.
en/reference/integrations-reference.mdx	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

[netlify]

✅ Deploy Preview for astro-docs-2 ready!

Name	Link
🔨 Latest commit	31b2a72
🔍 Latest deploy log	https://app.netlify.com/sites/astro-docs-2/deploys/679a7b9ca2d35a0008495225
😎 Deploy Preview	https://deploy-preview-10773--astro-docs-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[florian-lefebvre]

Do we want to keep line 99?

[sarah11918]

I think this looks great! Others still welcome to suggest improvements, but this is fine by me!

[ArmandPhilippot]

LGTM, less work for translators. 😄

Two suggestions:

1. I think we can also remove the sidebar label since it's no longer in the sidebar.

Suggested change

	sidebar:
	label: Tailwind

2. Maybe we should also update the link Astro’s Tailwind integration in Prerequisites in /en/recipes/tailwind-rendered-markdown/ to use the one from Tailwind instead?

[florian-lefebvre]

1. I matched what was done for Lit, so maybe we can clean it up as well
2. You're right, we probably need to scan for any link to the tailwind integration

I'm also wondering if on the integration page, we should link to the styles page so everyone goes through the same flow

[ArmandPhilippot]

1. Oh just nitpicking, I don't think it does anything anymore but it's not harmful. So yeah we could do that for Lit too.
2. Great call! There also some examples that use @astrojs/tailwind and some anchors should be renamed I think.

I checked in VSCode, the following pages uses either a link to the integration page, Tailwind integration as anchor or @astrojs/tailwind in a code snippet:

• /en/upgrade-astro.mdx
• /en/guides/fonts.mdx
• /en/guides/integrations-guide/index.mdx
• /en/guides/migrate-to-astro/from-create-react-app.mdx
• /en/guides/migrate-to-astro/from-gatsby.mdx
• /en/guides/migrate-to-astro/from-nextjs.mdx
• /en/reference/configuration-reference.mdx (this one should be updated in core)

There also two upgrade guides that use @astrojs/tailwind... (v2 and v3) but not sure if we should update them...

Regarding the link, yeah it could be better if npx astro add tailwind takes care of all the steps for the user (only adding @import 'tailwindcss'; is manual, right?). I don't have a strong opinion here...

[sarah11918]

Just quickly in general, we should probably still have some of the "usage" content on the Styling page now!

It's a little extreme to just essentially mic drop TAILWIND then run away 😅

People still want to know about using Tailwind. Do they need a config file? If so, what goes in there? Do they need to import anything into files, or just write their class names? Are there caveats or pitfalls when combining Tailwind with other CSS? Can you also import and use CSS regularly?

So, my suggestion is to take some of the meaningful/helpful usage content from the Tailwind page and put it in this Tailwind section!

Thoughts welcome on exactly which content that is!

[florian-lefebvre]

I think it's important to mention at least the following:

• you need a css file with @import "tailwindcss";. This acts as a config file now
• you need to import this css file on the page where you want it to apply. That will often be a shared layout

[sarah11918]

@florian-lefebvre Can you add those items back then? I can always polish it up, but it's helpful if you add the content first!

[sarah11918]

@florian-lefebvre Just checking, do any of these troubleshooting things about @apply still apply in v4?

[florian-lefebvre]

I think this is still relevant, although the tailwind config example isn't correct anymore: https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes

[sarah11918]

Looks great! Some small suggestions, and just wanted to check on some of the stuff being removed and not coming back (but if we remove too much, people will let us know and we can always add more later!) 🙌

[yanthomasdev]

A few nits, after those LGTM!

[sarah11918]

Amazing! Thank you so much for this @florian-lefebvre and catching all the stuff in the other files. Nicely done!