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