# Sage 11 + Vite - Tailwind class names in blade templates not working

**URL:** https://discourse.roots.io/t/sage-11-vite-tailwind-class-names-in-blade-templates-not-working/29468
**Category:** sage
**Tags:** vite, tailwind, sage11
**Created:** 2025-04-10T21:55:22Z
**Posts:** 6

## Post 1 by @darlng — 2025-04-10T21:55:22Z

Hi all,

I am trying to get Sage 11 up and working, but am stuck with a pretty basic issue.

When I run

```
yarn dev
```

Any css createdin app.css using @apply directives works as expected.

But when I try to use tailwind class names directly in blade templates likes so, nothing happens :

```
<div class="text-red-500 uppercase">Example</div>
```

My vite.config.js file is unchanged except for base:

```
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite';
import laravel from 'laravel-vite-plugin'
import { wordpressPlugin, wordpressThemeJson } from '@roots/vite-plugin';

export default defineConfig({
  base: '/wp-content/themes/bioamande/public/build/',
  plugins: [
    tailwindcss(),
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/css/editor.css',
        'resources/js/editor.js',
      ],
      refresh: true,
    }),

    wordpressPlugin(),

    // Generate the theme.json file in the public/build/assets directory
    // based on the Tailwind config and the theme.json file from base theme folder
    wordpressThemeJson({
      disableTailwindColors: false,
      disableTailwindFonts: false,
      disableTailwindFontSizes: false,
    }),
  ],
  resolve: {
    alias: {
      '@scripts': '/resources/js',
      '@styles': '/resources/css',
      '@fonts': '/resources/fonts',
      '@images': '/resources/images',
    },
  },
})
```

And I haven’t changed app.css either:

```
@import "tailwindcss" theme(static);
@source "../views/";
@source "../../app/";
```

Any ideas what I am missing?

I am assuming it’s something super basic, but for now I am stumped. Any help will be very appreciated.

---

## Post 2 by @jasperfrumau — 2025-04-11T04:08:00Z

You do have to do an initial build `npm run build` to have theme.json generated at least. Other than that I do not see issues right away. Seems you added a default Tailwind utility class for text color and made it uppercase only . And that should work with Tailwind working.

---

## Post 4 by @darlng — 2025-04-11T08:02:32Z

Thanks for the reply. I ran `yarn build` initially. And am running `yarn dev` but so far TailwindCSS classes only work in stylesheet - not when used in blade.php templates. Very strange…

---

## Post 5 by @jasperfrumau — 2025-04-11T09:02:56Z

I use

```
* -----------------------------------------------------------------------------
 * 1. Base Imports
 * -------------------------------------------------------------------------- */
@import './fonts.css';

/**
 * Tailwind CSS Integration with WordPress
 * 
 * The directive @import "tailwindcss" theme(static); does two important things:
 * 1. Imports the core Tailwind CSS framework
 * 2. The theme(static) parameter tells Tailwind to generate all classes at build time
 * rather than dynamically at runtime, which improves performance.
 * "static" means the utility classes are pre-generated rather than created on-demand.
 */
@import "tailwindcss" theme(static);
@source "../views/";
@source "../../app/";
...
```

so views and app as well. Perhaps that is needed. Hmm, I see now you have that too. Well, perhaps it is then a caching issue.. Also did you check content generated `public/build/assets/theme.json` ?

also for Bedrock setups base path is ` base: '/app/themes/theme/public/build/',`

---

## Post 6 by @valentinocossar — 2025-06-04T18:30:37Z

I’m encountering the same issue. For testing purposes, I added a `.gitignore` file inside Bedrock’s `themes` folder. As noted in the [Tailwind documentation on detecting classes in source files](https://tailwindcss.com/docs/detecting-classes-in-source-files#which-files-are-scanned), Tailwind ignores any files and folders listed in `.gitignore` . This means files or directories excluded by `.gitignore` won’t be scanned by Tailwind, potentially causing issues like the one I’m experiencing.

I’m not sure if this applies to your situation, but hopefully it helps in some way.