Can I access theme colors from a Stimulus controller?

[imderek]

I'm initializing an Apexchart in a Stimulus controller, but I'd like the chart to use Tailwind theme colors rather than static hex codes. My tailwind.config.js looks like:

const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')

module.exports = {
  darkMode: 'selector',
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.{erb,haml,html,slim}',
    './node_modules/flowbite/**/*.js'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        primary: {
          50: colors.emerald[50],
          100: colors.emerald[100],
          200: colors.emerald[200],
          300: colors.emerald[300],
          // and so on....
        },
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
    require('flowbite/plugin')({
        charts: true,
    }),
  ]
}

Like in the config above, I'd like to be able to do const colors = require('tailwindcss/colors') in a Stimulus controller, but that doesn't seem to work (error below). What am I doing wrong?

Error:

stimulus-loading-3576ce92b149ad5d6959438c6f291e2426c86df3b874c525b30faad51b0d96b3.js:26 Failed to register controller: chart (controllers/chart_controller) ReferenceError: require is not defined
    at chart_controller-3b51f6485f476b967cf042c4220a2231888eb309f2deca03415f604099ed049e.js:3:16

The controller:

import { Controller } from "@hotwired/stimulus"
import ApexCharts from "apexcharts"
const colors = require('tailwindcss/colors')

// Connects to data-controller="chart"
export default class extends Controller {
  connect() {
      // options omitted for brevity ... 
      const chart = new ApexCharts(document.getElementById("area-chart"), options);
      chart.render();
   }
 }