Tailwind not working in a fresh sage project during dev

sage
1

Hi, I have been trying out Sage lately and love it so far.

My only issue is that with a fresh installation of Sage, running dev doesn’t seem to work with tailwind. Adding any tailwind classes during dev results in no styling being added even when the new class is present. I understand that tailwind doesn’t compile unused classes but from my understanding, based on my own experience and what I read on this forum, tailwind should work just fine during dev.

Probably good to know and as my temporary solution, running build is just working fine. This way I am still able to style my components.

I have been looking up similar topics and tried the mentioned solutions, sadly this did not solve my issue. So after a good couple of hours, I am in need of some help.

2

It should and is working by default. Is it maybe working on local url and not on proxy one? Could you give more details?

3

Thank you for answering. This is the bud.config.js file I am using. I am running this using local by flywheel in which I called the website sage ( for now ). Outside of that, everything is exactly as the default sage theme as I only followed the instructions on this page Installing Sage | Sage Docs | Roots without making any other adjustments afterwards.

/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/sage/docs sage documentation}
 * @see {@link https://bud.js.org/learn/config bud.js configuration guide}
 *
 * @type {import('@roots/bud').Config}
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/reference/bud.entry}
   * @see {@link https://bud.js.org/reference/bud.assets}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/reference/bud.setPublicPath}
   */
  app.setPublicPath('/app/themes/sage/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/reference/bud.setUrl}
   * @see {@link https://bud.js.org/reference/bud.setProxyUrl}
   * @see {@link https://bud.js.org/reference/bud.watch}
   */
  app
    .setUrl('http://localhost:3000')
    .setProxyUrl('http://sage.local')
    .watch(['resources/views', 'app']);

  /**
   * Generate WordPress `theme.json`
   *
   * @note This overwrites `theme.json` on every build.
   *
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
   */
  app.wpjson
    .setSettings({
      background: {
        backgroundImage: true,
      },
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      },
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
        },
      },
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      },
      typography: {
        customFontSize: false,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};