If you're using Tailwind version 1.x, your tailwind.js file may be a bit different. For me, a lot of the default color settings/definitions were in "tailwind.config.js", and the "tailwind.js" file was nearly empty (a module.exports variable with a JSON skeleton thing). What worked for me is putting the custom settings in that tailwind.js file, like so:

module.exports = {
  purge: [],
  theme: {
    textColor: {
      default: 'var(--text-default-color)'
    },
    backgroundColor: {
      page: 'var(--page-background-color)',
      card: 'var(--card-background-color)',
      button: 'var(--button-background-color)',
      header: 'var(--header-background-color)',
    },
    extend: {},
  },
  variants: {},
  plugins: [],
}

I believe that was the only substantial difference, if in doubt can check the tailwind documentation (https://tailwindcss.com/docs/upgrading-to-v1).

Easy Tailwind Themes Using CSS Variables

This Series Has Been Archived