# Correct place to configure tailwind in Sage 11 / vite?

**URL:** https://discourse.roots.io/t/correct-place-to-configure-tailwind-in-sage-11-vite/29538
**Category:** sage
**Tags:** tailwind, sage11
**Created:** 2025-04-25T18:57:51Z
**Posts:** 3

## Post 1 by @skxctech — 2025-04-25T18:57:51Z

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.

---

## Post 2 by @Log1x — 2025-04-25T18:58:56Z

Tailwind configuration was changed in v4. Check out [Tailwind CSS v4.0 - Tailwind CSS](https://tailwindcss.com/blog/tailwindcss-v4#css-first-configuration)

---

## Post 3 by @skxctech — 2025-04-25T19:12:18Z

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