Add support for Tailwind 3

[BryceRussell]

Astro Theme Provider could automatically support theme packages that use tailwind by adding the package's path to the content array inside the tailwind configuration

Things to consider:

• When doing codegen, we should prompt the user if the change is ok, similar to astro add
• Is there another approach that could work better?
• Does Tailwind 4 have this problem? Recommending Tailwind 4 instead could be an easier path without codegen. Also, it can be included with a theme, so users don't have to do anything

[jdtjenkins]

Tailwind 4 and also UnoCSS (according to Adam) are great because they don't require any user input.

The... not easiest.. But fairly sleek way to add support for TW3 is to export a wrapTailwindConfig function from your theme. At least this is what I do with my theme at the moment but granted, it's not the nicest thing.

import {
	createResolver
} from 'astro-integration-kit'
import plugin from 'tailwindcss/plugin'
import { type Config,  } from 'tailwindcss'

const { resolve } = createResolver(__dirname)

export const GalaxyTailwindContent = [
	resolve('../**/*.{astro,html,js,ts,jsx,tsx,css}'),
]

export const GalaxyTailwindPlugin = () => plugin(() => {}, {
	theme: {
		fontFamily: {
			'galaxy-display': 'Titillium Web',
			'galaxy-body': 'Albert Sans',
		},
	},
});

export const wrapTailwindConfig = (config: Config): Config => {
	if (!config.content) {
		config.content = []
	}

	if (!config.plugins) {
		config.plugins = []
	}

	(config.content as unknown[]).push(
		...GalaxyTailwindContent,
	)

	config.plugins.push(GalaxyTailwindPlugin())

	return config
}

Then the user

// tailwind.config.js
import { wrapTailwindConfig } from 'my-theme/tailwind'

export default wrapTailwindConfig([...}) // they can then pass their own config here.

It would be better if you could just export a tailwind plugin. But neither TW3 plugins or extends let you add content paths. I don't know, not a perfect solution but thought I'd spitball

[BryceRussell]

These are some great insights, thanks for the info!

• Tailwind 4 seems like it would be the best solution, but sadly it is still in development.
• Unocss looks promising, I need to look into it more, but it looks like it could be a good alternative for authors.

I didn't realize that plugins could not extend content, that makes this a lot harder! This also has to support, multiple themes in a single project, I wonder if doing something like this would work:

import { mergeTailwindConfigs } from 'astro-theme-provider';
import configOne from 'my-theme-one/tailwind';
import configTwo from 'my-theme-two/tailwind';

export default mergeTailwindConfigs(
	configOne ,
	configTwo ,
	{
		// User config
	},
)

This seems like it would be a pain to code gen though. I hope support for tailwind 4 comes soon with backwards compatibility, that would be the easiest solution, just add a Vite plugin!

[BryceRussell]

I experimented with UnoCSS recently, and I think it is the best option here:

• It has a preset/plugin for compatibility with tailwind classes
• Adding your own classes/styles is easy
• Scoping styles to only your theme is easy
• This becomes an issue about documentation instead of an enhancement that requires code modification