CSS not compiling when building development

I have created a new block theme from scratch and have added Bud and Tailwind CSS. I have set my bud.config.mjs to settings similar to when I’m using Sage, but I have been unable to build the CSS when building bud build development. However, when I build using bud build production, the CSS compiles.

I have added @roots/bud-wordpress-manifests to see what is output when building and can verify that the .css files are not included in the entrypoints.json or manifest.json when running bud build development. However, they are there when running bud build production.

  • I have attempted this with Node v18.7.0 and v16.16.0.
  • I’m currently using bud v6.6.10. I’ve tried going back several releases with no luck.
  • I’m using bud-sass, but in an attempt to rule that out, I converted to a simple CSS setup but no luck.

Below is my bud.config.mjs

// @ts-check

 * Build configuration
 * @see {@link https://bud.js.org/guides/configure}
 * @param {import('@roots/bud').Bud} bud
export default async bud => {
   * The bud instance
     * Set the project source directory
    .setPath('@src', 'assets')

     * Set the application entrypoints
     * These paths are expressed relative to the '@src' directory
      app: ['scripts/app.js', 'styles/app.scss'],
      editor: ['scripts/editor.js', 'styles/editor.scss'],

     * Copy static assets from 'assets/' to 'dist/'
      ['images', 'images'], // copy from `@src/images` to `@dist/assets/images`
      ['fonts', 'fonts'], // copy from `@src/fonts` to `@dist/assets/fonts`

     * Matched files trigger a page reload when modified
    .watch([bud.path('@src/**/*'), 'parts/**/*', 'patterns/**/*', 'templates/**/*'])

     * Proxy origin ('WP_HOME')

     * Development origin

   * Make variables available throughout application
   * @link https://bud.js.org/docs/bud.provide#usage
    /* The following specifies that $ is the default jQuery export */
    /* Now, in any module in our application, we can invoke jQuery with $. There is no need to import it */
    jquery: ["jQuery", "$"],

  /* Ensure global styles are made available throughout the sass stylesheets, regardless of scope */


Below is my package.json

  "name": "kindling",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config/current"
  "engines": {
    "node": ">=16.0.0"
  "scripts": {
    "dev": "bud build development",
    "prod": "bud build production",
    "lint": "npm run lint:js && npm run lint:css",
    "lint:js": "eslint assets/scripts",
    "lint:css": "stylelint \"assets/**/*.{css,scss,vue}\"",
    "test": "npm run lint"
  "devDependencies": {
    "@roots/bud": "6.6.10",
    "@roots/bud-eslint": "^6.6.10",
    "@roots/bud-postcss": "^6.6.10",
    "@roots/bud-prettier": "^6.6.10",
    "@roots/bud-sass": "^6.6.10",
    "@roots/bud-stylelint": "^6.6.10",
    "@roots/bud-tailwindcss": "6.6.10",
    "@roots/bud-wordpress-manifests": "^6.6.10",
    "@roots/eslint-config": "^6.6.10",
    "@tailwindcss/typography": "^0.5.8",
    "stylelint": "^14.13.0"
  "dependencies": {
    "caniuse-lite": "^1.0.30001406"

Any thoughts on why this would work for production but not development?

This is expected behavior FYI

CSS is not built the same way during development — it’s injected via JS

1 Like

Thanks, @ben. This sent me down the right path.

I’m embarassed to admit, but I discovered my scripts were not actually enqued correctly.

1 Like

Hi @ben,

I’m also struggling with this. Is there a way to force bud to output files like it would do on a production build (but still “watch”)? Basically I’d like to build my assets without hot stuff.

When working with editor styles, WordPress is expecting some css file: WordPress/block-editor.php at 1a21c14d857a0d85d44794d871add3dbdab88d5b · WordPress/WordPress · GitHub

I tried many things, none of them worked.

@nlemoine Hi! Please create a new topic relevant to your issue since this one is already solved