> ## Documentation Index
> Fetch the complete documentation index at: https://veekthoven-laravel-inertia-toast-24-61.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Info>
  Without this configuration, the toast components won't be styled correctly because Tailwind won't generate the necessary CSS classes.
</Info>

## Tailwind v4 setup

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

<Tabs>
  <Tab title="Vue 3">
    Add this line to your `resources/css/app.css` file:

    ```css resources/css/app.css theme={null}
    @import "tailwindcss";

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

    <Note>
      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.
    </Note>
  </Tab>

  <Tab title="React">
    Add this line to your `resources/css/app.css` file:

    ```css resources/css/app.css theme={null}
    @import "tailwindcss";

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

    <Note>
      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.
    </Note>
  </Tab>
</Tabs>

### Multiple CSS file locations

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

```css app/frontend/styles/app.css (example) theme={null}
@import "tailwindcss";

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

```css public/css/app.css (example) theme={null}
@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.

<Tabs>
  <Tab title="Vue 3">
    ```js tailwind.config.js theme={null}
    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: [],
    }
    ```
  </Tab>

  <Tab title="React">
    ```js tailwind.config.js theme={null}
    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: [],
    }
    ```
  </Tab>
</Tabs>

<Note>
  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.
</Note>

### TypeScript config files

If you're using `tailwind.config.ts` instead:

<CodeGroup>
  ```ts tailwind.config.ts (Vue 3) theme={null}
  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
  ```

  ```ts tailwind.config.ts (React) theme={null}
  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/**/*.tsx',
          './node_modules/@laravel-inertia-toast/react/dist/**/*.js',
      ],
      theme: {
          extend: {},
      },
      plugins: [],
  } satisfies Config
  ```
</CodeGroup>

## Verifying the setup

After configuring Tailwind, rebuild your assets:

```bash theme={null}
npm run build
```

Or if you're in development mode:

```bash theme={null}
npm run dev
```

Test that toasts display correctly with proper styling:

```php theme={null}
use InertiaToast\Facades\Toast;

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

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

## 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)

<Warning>
  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.
</Warning>

## Production builds

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

```bash theme={null}
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.