Roots Discourse

Tailwind resolveConfig ESM export syntax

Apologies in advance if this is a silly question, but I’ve bashing my head against a wall for a couple of hours trying to access the Tailwind config in JS. Normally I just do this - https://tailwindcss.com/docs/configuration#referencing-in-java-script

But I’m just getting the following error no matter what I try:

Uncaught Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: ./tailwind.config.js
at Object.set [as exports] ((index):586)
at eval (tailwind.config.js?d26c:6)
at Module../tailwind.config.js (app.js?id=9ad09d8613a0eedc462b:51)
at __webpack_require__ ((index):526)
at eval (app.js?ce4c:45)
at Module../resources/scripts/app.js (app.js?id=9ad09d8613a0eedc462b:18)
at __webpack_require__ ((index):526)
at checkDeferredModulesImpl ((index):693)
at webpackJsonpCallback ((index):675)
at app.js?id=9ad09d8613a0eedc462b:9

My settings are the defaults so far.

I’ve tried importing, requiring:

import resolveConfig from "tailwindcss/resolveConfig";
// import tailwindConfig from "../../tailwind.config";
const tailwindConfig = require("../../tailwind.config.js");
const fullConfig = resolveConfig(tailwindConfig);

Also tried requiring it in another file & then exporting it in ES6 format… & then making the sourceType unambiguous in eslintrc.

Pretty sure this is something with Laravel Mix but if someone could point me in the right direction it would be much appreciated :slight_smile:

Came back to this today, couldn’t figure out an easy way of doing this but here is my solution for now:

Created ./bin/generate-tailwind-theme in theme root

Added the following to it:

#!/usr/bin/env node

const fs = require("fs");
const resolveConfig = require("tailwindcss/resolveConfig");
const prettier = require("prettier");
const path = require("path");
const tailwindConfig = require("../tailwind.config.js");

const { theme } = resolveConfig(tailwindConfig);
const themeStr = JSON.stringify(theme);
const js = `const theme  = ${themeStr}
            export default theme`;

try {
  fs.writeFileSync(
  path.resolve(process.cwd(), "./resources/scripts/tw-theme.js"),
  prettier.format(js, { parser: "babel" }),
  "utf-8");
} catch (err) {
  console.log(err.message);
}

It my case, I’ll just run it every time I start up so changed the yarn start command to "start": "chmod u+x ./bin/generate-tailwind-theme && ./bin/generate-tailwind-theme && mix watch",

Then I can now access via resources/scripts/tw-theme.js with ES6