Best practice for Tailwind theme config

I'm in the process of building out a Tailwind theme for my Laravel/Vue project but my tailwind.config.js is going to be gargantuan if I inline all my configs. I'd prefer to import my theme elements in separate files but where is the best place to put these files?

// tailwind.config.js

const path = require('path');
const dir = path.resolve(__dirname, 'resources/js/tailwind/theme'); // theme files here???
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],

    theme: {
        colors: require(dir + '/colors.js'),
		...
        extend: {},
    },

    plugins: [require('@tailwindcss/forms')],
};

// resources/js/tailwind/theme/colors.js
 
module.exports = function () {
  return {
    transparent: "transparent",
    current: "currentColor",
    ...
  };
};