Set build.cssTarget for Tailwind CSS add-on

[hyunbinseo]

Tailwind CSS now requires Chrome 111+

Tailwind CSS v4.0 is designed for and tested on modern browsers, and the core functionality of the framework specifically depends on these browser versions:

• Chrome 111 (released March 2023)
• Safari 16.4 (released March 2023)
• Firefox 128 (released July 2024)

https://tailwindcss.com/docs/compatibility

However, SvelteKit currently builds on target: 'modules' which targets Chrome 87:

Browser compatibility target for the final bundle. The default value is a Vite special value, 'modules', which targets browsers with native ES Modules, native ESM dynamic import, and import.meta support. Vite will replace 'modules' to ['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']

https://vite.dev/config/build-options#build-target

This causes Vite to target older browsers with its CSS build output.

This can be fixed by setting Vite's build.cssTarget out-of-the box.

import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  build: { cssTarget: ['firefox128', 'chrome111', 'safari16.4'] },
  plugins: [tailwindcss(), sveltekit()],
});

Note

Even with this setting, browser native CSS nesting is not flattened since it is supported from Safari 17.2. Reference sveltejs/kit#13732