Reference theme.extend.x in Javascript

[bradley-varol]

I've scoured the internet for how to do the following, with no luck:

tailwind.config.js:

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

module.exports = {
    theme: {
        extend: {
            colors: {
                primary: defaultTheme.colors.purple,
            },
        },
    },
    variants: {},
    plugins: [],
};

vue compoennt:

<script>
import resolveConfig from 'tailwindcss/resolveConfig';
const { theme } = resolveConfig('@/tailwind.config.js');

console.log(theme.extend.colors.primary[500]); // TypeError: "theme.extend is undefined"
</script>

Is it possible to access the extended theme from Javascript?
Awesome library, Adam. Thanks.

[tlgreg]

The resolved config doesn't have extend anymore, your values are merged in at that point, in the above example you have theme.colors.primary

[bradley-varol]

Thanks for a speedy response, @tlgreg , but theme.colors.primary is undefined.

[adamwathan]

resolveConfig expects a config object to resolve, not a path:

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from '../tailwind.config.js';
const { theme } = resolveConfig(tailwindConfig);

Docs here: https://tailwindcss.com/docs/configuration/#referencing-in-javascript

[bradley-varol]

I've changed my imports to be like the docs and I'm getting the following error during compilation:

./components/HelloWorld.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/HelloWorld.vue?vue&type=script&lang=js&) 46:35-49
"export 'default' (imported as 'tailwindConfig') was not found in '@/tailwind.config.js' vendors.app.js:2885:15
TypeError: ""exports" is read-only"

[adamwathan]

Sounds like a webpack issue with mixing ES6 and CommonJS imports. Try using regular require instead of import to get the tailwindConfig.

[bradley-varol]

Adding sourceType: 'unambiguous' to my Babel config fixed this by allowing me to import a module.exports.

Thanks for your time, Adam.