Upgrading @nuxtjs/tailwindcss 4 to 5
Breaking4.2.1 → 5.3.5Breaking6New5Changed6Fixed19Other25
BreakingUpgrade verdict
6 breaking changes.
In plain terms
- Just-in-time style generation is now on by default, so the old setting is no longer needed.
- Code that imports the generated Tailwind config must use the new import name.
- Migrates the module to Tailwind CSS v3.
- Rewrites the module with module-builder and nuxt/kit.
Must act Top 3 of 6 that need code or config changes
@nuxtjs/tailwindcss publishes an official migration guide for version 5. It covers more than the release notes do.
Tailwind upgrade guide ↗Adds @nuxt/kit ^3.0.0-rc.9.
Installs 297 packages in all (was 275).
What you must change
Breaking6
Enables JIT mode by default; the jit option can be removed if already in use.
jitRenames the
~tailwind.config import to #tailwind-config for the generated Tailwind config.~tailwind.config#tailwind-configMigrates the module to Tailwind CSS v3.
Rewrites the module with module-builder and nuxt/kit.
nuxt/kitUpgrades TailwindCSS to v3, which changes Tailwind behavior and configuration.
Calls the
tailwindcss:config hook during module installation, so modules extending the config must be installed before the tailwindcss module.tailwindcss:configAPI changes
Generated by DepDelta from published .d.ts files. Not mixed with prose notes.
- added:
interface NuxtConfig - added:
interface NuxtHooks extends ModuleHooks - added:
interface NuxtOptions - added:
property NuxtConfig['tailwindcss']?: Partial<ModuleOptions> - added:
property NuxtOptions['tailwindcss']?: ModuleOptions
- removed:
default tailwindCSSModule - removed:
function tailwindCSSModule(moduleOptions: any): Promise<void> - removed:
namespace tailwindCSSModule - removed:
var tailwindCSSModule.meta: { name: string; version: string }
- added:
const default: _nuxt_schema.NuxtModule<ModuleOptions> - added:
interface ModuleHooks - added:
interface ModuleOptions - added:
property ModuleHooks.'tailwindcss:config': (tailwindConfig: any) => void - added:
property ModuleOptions.config: Config - added:
property ModuleOptions.configPath: Arrayable<string> - added:
property ModuleOptions.cssPath: string - added:
property ModuleOptions.disableHmrHotfix: boolean - added:
property ModuleOptions.exposeConfig: boolean - added:
property ModuleOptions.injectPosition: InjectPosition - added:
property ModuleOptions.viewer: boolean
- added:
declare module '@nuxt/schema' - added:
export { default } from './module'