Upgrade to v17

Published Mon Aug 18 2025 by Mark

Deprecations

react-widgets is completely removed.
All legacy CSS is removed - form-control, standard styles for h1 elements, etc.
Custom Tailwind sizing with t-shirt sizing (i.e. p-md, gap-lg) is deprecated in favour of Tailwinds standard sizing utilities. This is because AI helpers are more likely to know about Tailwind standards, so we might as well get used to them. Also custom sizing works less will in Tailwind 4.
Custom classes for dark mode (border-darkMode) are removed. See replacements further down.

The following changes have been made in Gunnel v17.

Tailwind is upgraded from 3 to 4. See details below.
Support for React 19 is added. The documentation is built using v19 now.
Support for react < 18 is dropped.
3rd-party React components are updated to latest versions:
- react-select -> 5.10.2
- react-window -> 1.8.11
Replaced @funnel-io/react-virtualized-auto-sizer with the original react-virtualized-auto-sizer and upgraded to 1.0.26.
field-picker peer dependency requirements are updated:
- @dnd-kit/core >= 6.0.0
- @dnd-kit/sortable >= 10.0.0
- react-window >= 1.8.11
- react-virtualized-auto-sizer >= 1.0.26

This guide assumes you are using React and Vite.

Remove postcss and friends and the old Funnel styles as they are no longer required:

Install Tailwind 4, the Tailwind Vite plugin, and the new Funnel theme library:

Add the tailwind vite plugin to vite config:

Add to the top of your main css file:

If you have more css files you may need to add a @reference to them.

Fonts are no longer included in the tailwind theme and must be added to your HTML.

Add this to the <head> in your index.html:

Replace deprecated classes with new decision-based utilities:

Fix borders:

Replace heading classes:

Fix modal headers:

Forms

Lists

components

Property Lists