[bug] Sass with Tailwind config gives an error

[kjvdven]

Agreement

• This is not a duplicate of an existing issue
• I have read the guidelines for Contributing to Roots Projects
• This is not a personal support request that should be posted on the Roots Discourse community

Describe the issue

I started a new Wordpress theme with Sage and bud and the only thing I did was to add sass to the project, following the docs and the temp fix from issue #2311.

But when running the template with bud-sass and bud-tailwindcss the project won't build correctly and bud throws an error.

[fs] [tailwind.config.js] › ⚠  tailwind.config.js causes an exception when imported.
Since tailwind.config.js does not appear to be a bud configuration file, bud.js is not throwing. Original error follows:

BudError: defaultTheme is not defined

If I run the project with only one of the plugins, there are no errors.

Expected Behavior

For Bud.js to run with 0 errors.

Actual Behavior

Bud.js runs with errors.

Steps To Reproduce

1. Setup a new Theme via Sage
2. Add the sass plugin to Bud.js as described in the docs
3. yarn run

version

6.12.3

Logs

No response

Configuration

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "wp i18n update-po ./resources/lang/sage.pot ./resources/lang/*.po",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@roots/bud": "6.12.3",
    "@roots/bud-sass": "^6.12.3",
    "@roots/bud-tailwindcss": "^6.12.3",
    "@roots/sage": "6.12.3",
    "sass": "1.62.1"
  },
  "dependencies": {}
}

Relevant .budfiles

No response

[retlehs]

I'm not able to reproduce this

[kellymears]

This warning message is telling you that there is a reference to defaultTheme somewhere in your tailwind config and that it is undefined. You may have copy/pasted code that includes defaultTheme, or you may have just forgotten to import it.

The warning is emitted very early, way before bud.js and any of its services or extensions have been instantiated -- you'd get the same error trying to import your tailwind config from a generic module or the node repl.

Likely fixes: adding import defaultTheme from 'tailwindcss/defaultTheme' to the top of your tailwind config. Or removing the defaultTheme reference from the config.

See related questions like: tailwindlabs/tailwindcss#9596.

I don't think this has anything to do with @roots/bud-sass or @roots/bud-tailwindcss. If you think it is something we're doing please provide a repo or codesandbox or something so we can better assist you.