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

sage
, ,
1

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.

2

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.

4

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…

5

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/',

6

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, 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.

1 Like