Tailwind CSS setup

Configure Tailwind CSS to detect and generate classes used by the toast components

The toast components use Tailwind CSS classes internally. You need to configure Tailwind to detect these classes so they’re included in your final CSS bundle.

Why this setup is needed

Tailwind CSS uses a JIT (Just-In-Time) compiler that scans your source files to determine which classes to generate. Since the toast components are installed as npm packages in node_modules, Tailwind won’t scan them by default.

Without this configuration, the toast components won’t be styled correctly because Tailwind won’t generate the necessary CSS classes.

Tailwind v4 setup

If you’re using Tailwind CSS v4, add a @source directive to your main CSS file.

Vue 3

Add this line to your resources/css/app.css file:

resources/css/app.css

@import "tailwindcss";

@source "../../node_modules/@laravel-inertia-toast/vue/dist/**/*.js";

The relative path ../../node_modules/ assumes your CSS file is at resources/css/app.css. If your CSS file is in a different location, adjust the path accordingly.

React

Add this line to your resources/css/app.css file:

resources/css/app.css

@import "tailwindcss";

@source "../../node_modules/@laravel-inertia-toast/react/dist/**/*.js";

The relative path ../../node_modules/ assumes your CSS file is at resources/css/app.css. If your CSS file is in a different location, adjust the path accordingly.

Multiple CSS file locations

If your CSS file is in a different location, adjust the relative path:

app/frontend/styles/app.css (example)

@import "tailwindcss";

/* From app/frontend/styles/ to node_modules */
@source "../../../node_modules/@laravel-inertia-toast/vue/dist/**/*.js";

public/css/app.css (example)

@import "tailwindcss";

/* From public/css/ to node_modules */
@source "../../node_modules/@laravel-inertia-toast/react/dist/**/*.js";

Tailwind v3 setup

If you’re using Tailwind CSS v3, add the package path to the content array in your Tailwind configuration.

Vue 3

tailwind.config.js

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',

        // Add this line:
        './node_modules/@laravel-inertia-toast/vue/dist/**/*.js',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

React

tailwind.config.js

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.tsx',

        // Add this line:
        './node_modules/@laravel-inertia-toast/react/dist/**/*.js',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

The paths above assume your tailwind.config.js is at the root of your project. The paths are relative to where the config file is located.

TypeScript config files

If you’re using tailwind.config.ts instead:

tailwind.config.ts (Vue 3)

import type { Config } from 'tailwindcss'

export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.vue',
        './node_modules/@laravel-inertia-toast/vue/dist/**/*.js',
    ],
    theme: {
        extend: {},
    },
    plugins: [],
} satisfies Config

Verifying the setup

After configuring Tailwind, rebuild your assets:

npm run build

Or if you’re in development mode:

npm run dev

Test that toasts display correctly with proper styling:

use InertiaToast\Facades\Toast;

Route::get('/test-toast', function () {
    Toast::success('If you see this styled correctly, Tailwind is configured!');
    return inertia('Dashboard');
});

If the toast appears but looks unstyled (no colors, spacing, or animations), double-check your Tailwind configuration and rebuild your assets.

Common issues

Toasts appear unstyled

Cause: Tailwind isn’t detecting the classes used by the toast components.

Solution:

1. Verify you’ve added the correct path to your Tailwind config
2. Rebuild your assets with npm run build or restart npm run dev
3. Clear your browser cache

Wrong relative path

Cause: The relative path in your config doesn’t correctly point to node_modules.

Solution: Adjust the path based on where your config file is located:

• If config is at project root: ./node_modules/@laravel-inertia-toast/...
• If CSS is in resources/css/: ../../node_modules/@laravel-inertia-toast/...
• If CSS is in a nested folder: Count directories up to reach project root

Both Vue and React packages

Cause: You accidentally added both packages to your config.

Solution: Only include the package for the framework you’re using:

• Use @laravel-inertia-toast/vue for Vue 3 projects
• Use @laravel-inertia-toast/react for React projects
• Never include both (unless you’re building a multi-framework setup, which is rare)

Don’t add both Vue and React package paths unless you’re actually using both frameworks in the same project. This will increase your CSS bundle size unnecessarily.

Production builds

This configuration works the same for both development and production builds. When you run:

npm run build

Tailwind will scan the configured paths and include only the classes actually used by the toast components, keeping your production CSS bundle optimized.