#Astro v6 with Tailwind v3

8 messages · Page 1 of 1 (latest)

cerulean sail
#

At kleinanzeigen we can't update to Tailwind v4 because of browser compatibility, so we need to stick to v3.
The current plugin <@&1055234544183287879>/tailwind only support up to Astro v5, making impossible for us to migrate to Astro v6

jade mountainBOT
#

Hi @cerulean sail. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Good news — Tailwind 3 is still supported in Astro v6! You can continue using it by manually installing the legacy dependencies.

Here's what you need to do:

1. Install Tailwind 3 and the Astro Tailwind integration

npm install tailwindcss@3 @astrojs/tailwind

2. Add the integration to your astro.config.mjs

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  // ...
  integrations: [tailwind()],
  // ...
});

3. Create a tailwind.config.mjs with your content paths

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

The Astro docs explicitly state that installing these dependencies manually is the supported path for legacy Tailwind 3 compatibility and is separate from the Tailwind 4 Vite plugin approach. [Legacy Tailwind 3 support]

So while astro add tailwind in Astro ≥5.2.0 now installs the Tailwind 4 Vite plugin by default, you can still use @astrojs/tailwind with tailwindcss@3 manually in Astro v6 — it just requires the manual installation steps above rather than the CLI command.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@cerulean sail Kapa.ai is still learning and improving, please let me know how I did by reacting below.

cerulean sail
#

But <@&1055234544183287879>/tailwind have this as peer dependency:

    "astro": "^3.0.0 || ^4.0.0 || ^5.0.0",
    "tailwindcss": "^3.0.24"
  },```
Which prevents to be installed in astro v6 what can we do @jade mountain
jade mountainBOT
#

Let me check the knowledge base for you again. One moment! :books:

#

That's a valid concern. The peer dependency constraint ("astro": "^3.0.0 || ^4.0.0 || ^5.0.0") on @astrojs/tailwind does technically exclude Astro v6, and the knowledge sources I have available don't contain specific guidance on how to work around this peer dependency conflict.

A few practical options worth considering:

  1. Force/override the peer dependency — Most package managers allow you to bypass peer dependency checks:

    • npm: use --legacy-peer-deps flag
    • pnpm: use --no-strict-peer-dependencies or add an overrides entry in package.json
    • Yarn: use resolutions in package.json

    However, I cannot confirm from the available knowledge sources whether @astrojs/tailwind actually works correctly at runtime with Astro v6, even if the installation succeeds.

  2. Check the official changelog — The knowledge sources recommend checking the integration's changelog for upgrade guidance. [Official Astro integrations] It's possible a newer version of @astrojs/tailwind has been released that adds Astro v6 to its peer dependencies.

  3. File an issue or check GitHub — The knowledge sources suggest checking Astro's issues on GitHub for reported issues or to file one yourself. [Known Issues]

#

I'd recommend checking the @astrojs/tailwind CHANGELOG and the Astro GitHub issues directly for the most up-to-date information on Astro v6 + Tailwind 3 compatibility, as this specific scenario isn't covered in the knowledge sources I have available.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: