# Archive Template not loading Tailwindcss

**URL:** https://discourse.roots.io/t/archive-template-not-loading-tailwindcss/25859
**Category:** sage
**Tags:** tailwind, sage10
**Created:** 2023-08-24T17:47:25Z
**Posts:** 3

## Post 1 by @earl — 2023-08-24T17:47:25Z

So I created a new post\_type called “search” with the following config

 ![image](https://discourse.roots.io/uploads/default/original/2X/3/3d6ebed6294547293d6fe1b5b8281eb7dc6fb300.png)

and I noticed when I run `yarn dev` the URL /search doesn’t have the main.css which is my tailwindcss.

 ![image](https://discourse.roots.io/uploads/default/original/2X/d/dd6c3e646419408287d895a074f17c3869cb31c7.png)

but it works fine with my other custom post\_type called “activities”

 ![image](https://discourse.roots.io/uploads/default/original/2X/3/315b13cc712236721ced2abd7c741dc45dcba556.jpeg)

is it my bud config??

```
/**
 * Compiler configuration
 *
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 *
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/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/docs/bud.setPublicPath}
   */
  app.setPublicPath('/app/themes/sage/public/');

  /**
   * Development server settings
   *
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
   */
  app
    .setUrl('http://domain.localhost')
    .setProxyUrl('http://domain.com')
    .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
    .set('settings.color.custom', false)
    .set('settings.color.customDuotone', false)
    .set('settings.color.customGradient', false)
    .set('settings.color.defaultDuotone', false)
    .set('settings.color.defaultGradients', false)
    .set('settings.color.defaultPalette', false)
    .set('settings.color.duotone', [])
    .set('settings.custom.spacing', {})
    .set('settings.custom.typography.font-size', {})
    .set('settings.custom.typography.line-height', {})
    .set('settings.spacing.padding', true)
    .set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
    .set('settings.typography.customFontSize', false)
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize()
    .enable();
};
```

Tailwind Config

```
/** @type {import('tailwindcss').Config} config */
import flowbite from 'flowbite/plugin.js';

const config = {
  prefix: 'tw-',
  important: true,
  content: ['./index.php', './app/ **/*.php', './resources/** /*.{php,vue,js}'],
  theme: {
    screens: {
      'sm': '415px',
      // => @media (min-width: 640px) { ... }

      'md': '745px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1990px',
      // => @media (min-width: 1536px) { ... }
    },
    extend: {
      colors: {}, // Extend Tailwind's default colors
    },
    fontFamily: {
      'agoda-sans-stem': ['AgodaSansStem'],
      'agoda-sans-stemless': ['AgodaSansStemless'],
      'agoda-sans-stemless-bold': ['AgodaSansStemlessBold'],
      'agoda-sans-text': ['AgodaSansText'],
      'agoda-sans-text-bold': ['AgodaSansTextBold'],
      'agoda-sans-text-black': ['AgodaSansTextBlack']
    }
  },
  plugins: [
    flowbite,
  ],
};

export default config;
```

---

## Post 2 by @earl — 2023-08-24T19:41:58Z

Same goes to my Single template. tailwindcss is not loading or is being watched by `yarn dev`

---

## Post 3 by @Brangi_mino — 2023-09-05T23:12:27Z

Hi. What worked in my case was adding the files. I am not sure if this is the proposed way, but it is working, like this. I agree it should work as mentioned in the tailwind docs, but it somehow didn’t for me.  
Hope it will help you further.  
Thx,  
B.

content: [  
“./psk/_.{php,html,js}",  
"./_.{php,html,js}”,  
“./components/hero.php”, // Path to your hero.php file  
“./components/mypage.php”,  
“./templates/main-header-template.php”,  
“./templates/homepage-template.php”,  
“./inc/main-menu-functions.php”  
],