Hi! I’m Sjardo, the writer of the tailwind & hubspot blog 
A rough outline of the tailwind.config i use for most setups. but:
const plugin = require('tailwindcss/plugin')
module.exports = {
content: [
'./modules/**/*.{html, css}',
'./templates/**/*.{html, css}',
'./templates/**/**/*.{html, css}', // clean this up
],
theme: {
container: {
center: true,
padding: '2rem',
},
extend: {
colors: {
primary: {
light: 'var(--primary-light)',
DEFAULT: 'var(--primary)',
dark: 'var(--primary-dark)'
},
secondary: {
light: 'var(--secondary-dark)',
DEFAULT: 'var(--secondary)',
dark: 'var(--secondary-dark)'
},
},
},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/container-queries'),
],
}
The only thing i do with the theme.json, is set matching css variable to make sure they work together. That’s about it. And the theme is used on plenty of sites, all fully managed for colors and fonts witouth touching any code!
Example of primary colors:
{
"label": "Global colors",
"name": "global_colors",
"type": "group",
"children": [
{
"label": "Primary",
"name": "primary",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#494A52"
}
},
{
"label": "Primary Dark",
"name": "primary__dark",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#494A52"
}
},
{
"label": "Primary Light",
"name": "primary__light",
"type": "color",
"visibility": {
"hidden_subfields": {
"opacity": true
}
},
"default": {
"color": "#494A52"
}
},
and within theme-overwrides.css, you do set the css variables:
{% set primary_color = theme.global_colors.primary.color %}
{% set primary_color_light = theme.global_colors.primary__light.color %}
{% set primary_color_dark = theme.global_colors.primary__dark.color %}
:root{
--primary: {{ primary_color }};
--primary-light: {{ primary_color_light }};
--primary-dark: {{ primary_color_dark }};
}
I hope this guides you in the right direction!