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.