Thank you for sharing this example! Very helpful.
As far as I understand, in order to define the callbacks outside of the main app (either in the tab file or a separate file just for callbacks), you need to have a separate app.py file that you import from your main app file so instead of app = dash.Dash() you have from app import app
It is explained in the bottom of the page URLs and Multi-Page App Tutorial that you quoted, but maybe was not when you created this example. (So I thought I just quote it here for reference)
It is worth noting that in both of these project structures, the Dash instance is defined in a separate
app.py, while the entry point for running the app isindex.py. This separation is required to avoid circular imports: the files containing the callback definitions require access to the Dashappinstance however if this were imported fromindex.py, the initial loading ofindex.pywould ultimately require itself to be already imported, which cannot be satisfied.
And the app.py file is simply just something like this
import dash
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.config.suppress_callback_exceptions = True