Correct place to configure tailwind in Sage 11 / vite?

sage
,
1

Hello - just looking into the changes since Sage 9 – on previous projects I used the tailwind.config.js in the theme root – what’s the way to do this in Sage 11?

Setting up a new project now, attempting:

theme/tailwind.config.js:


export default {
  theme: {
    extend: {
      colors: {
        brand: '#FF0066',
      },
    },
  },
  plugins: [],
};

theme/vite.config.js:

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

export default defineConfig({
  base: '/app/themes/hncl/public/build/',
  plugins: [
    tailwindcss(),
    laravel({
      input: {
        app: 'resources/js/app.js',
        editor: 'resources/js/editor.js',
        appStyle: 'resources/css/app.css',
        editorStyle: 'resources/css/editor.css',
      },
      refresh: true,
    }),
    wordpressPlugin(),
    wordpressThemeJson({
      disableTailwindColors: false,
      disableTailwindFonts: false,
      disableTailwindFontSizes: false,
      tailwindConfig: './tailwind.config.js',
    }),
  ],
  resolve: {
    alias: {
      '@scripts': '/resources/js',
      '@styles': '/resources/css',
      '@fonts': '/resources/fonts',
      '@images': '/resources/images',
    },
  },
  build: {
    manifest: true,
    rollupOptions: {
      input: {
        app: path.resolve(__dirname, 'resources/js/app.js'),
        editor: path.resolve(__dirname, 'resources/js/editor.js'),
        'app-style': path.resolve(__dirname, 'resources/css/app.css'),
        'editor-style': path.resolve(__dirname, 'resources/css/editor.css'),
      },
      output: {
        entryFileNames: 'js/[name].js',
        chunkFileNames: 'js/[name].js',
        assetFileNames: ({ name, names }) => {
          const entry = (names && names[0]) || name || '';
          if (entry.includes('app-style')) return 'css/app.css';
          if (entry.includes('editor-style')) return 'css/editor.css';
          return 'assets/[name][extname]';
        },
      },
    },
  },
});

Tailwind works fine, but seems to ignore the custom color. I’d love a little help or a pointer, thanks.

2

Tailwind configuration was changed in v4. Check out Tailwind CSS v4.0 - Tailwind CSS

3

Thanks @Log1x, the pace of frontend stuff is hellish sometimes.

1 Like