Theme.json and Tailwind

tailwind.config.js

const fs   = require( 'fs' );
const path = require( 'path' );

const themeJsonPath = path.join( __dirname, 'theme.json' );
const themeJson    = fs.readFileSync( themeJsonPath );
const theme       = JSON.parse( themeJson );

const { palette } = theme.settings.color;
const colors      = palette.reduce(( acc, item ) => {
	const [color, number] = item.slug.split( '-' );

	if ( number ) {
    	
		// If there is a number identifier, make this an object
		if ( ! acc[color] ) {
    		acc[color] = {};
    	}
    	acc[color][number] = item.color;

	} else {
		acc[color] = item.color;
	}

	return acc;
}, {} );

module.exports = {
  theme: { colors },
};

theme.json

{
	"version": 2,
	"settings": {
		"color": {
			"custom": true,
			"palette": [
				{
					"color": "#f5f5f4",
					"slug": "gray-100",
					"name": "Gray 100"
				},
				{
					"color": "#e7e5e4",
					"slug": "gray-200",
					"name": "Gray 200"
				},
				{
					"color": "#d6d3d1",
					"slug": "gray-300",
					"name": "Gray 300"
				}
			]
		}
	}
}