--- title: Installation --- **The Notifications package is pre-installed with the [Panel Builder](/docs/panels).** This guide is for using the Notifications package in a custom TALL Stack application (Tailwind, Alpine, Livewire, Laravel). ## Requirements Filament requires the following to run: - PHP 8.1+ - Laravel v10.0+ - Livewire v3.0+ - Tailwind v3.0+ [(Using Tailwind v4?)](#installing-tailwind-css) Require the Notifications package using Composer: ```bash composer require filament/notifications:"^3.3" -W ``` ## New Laravel projects To quickly get started with Filament in a new Laravel project, run the following commands to install [Livewire](https://livewire.laravel.com), [Alpine.js](https://alpinejs.dev), and [Tailwind CSS](https://tailwindcss.com): > Since these commands will overwrite existing files in your application, only run this in a new Laravel project! ```bash php artisan filament:install --scaffold --notifications npm install npm run dev ``` ## Existing Laravel projects Run the following command to install the Notifications package assets: ```bash php artisan filament:install --notifications ``` ### Installing Tailwind CSS > Filament uses Tailwind CSS v3 for styling. If your project uses Tailwind CSS v4, you will unfortunately need to downgrade it to v3 to use Filament. Filament v3 can't support Tailwind CSS v4 since it introduces breaking changes. Filament v4 will support Tailwind CSS v4. Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins: ```bash npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev ``` Create a new `tailwind.config.js` file and add the Filament `preset` *(includes the Filament color scheme and the required Tailwind plugins)*: ```js import preset from './vendor/filament/support/tailwind.config.preset' export default { presets: [preset], content: [ './app/Filament/**/*.php', './resources/views/filament/**/*.blade.php', './vendor/filament/**/*.blade.php', ], } ``` ### Configuring styles Add Tailwind's CSS layers to your `resources/css/app.css`: ```css @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; ``` Create a `postcss.config.js` file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins: ```js export default { plugins: { 'tailwindcss/nesting': 'postcss-nesting', tailwindcss: {}, autoprefixer: {}, }, } ``` ### Automatically refreshing the browser You may also want to update your `vite.config.js` file to refresh the page automatically when Livewire components are updated: ```js import { defineConfig } from 'vite' import laravel, { refreshPaths } from 'laravel-vite-plugin' export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: [ ...refreshPaths, 'app/Livewire/**', ], }), ], }) ``` ### Compiling assets Compile your new CSS and Javascript assets using `npm run dev`. ### Configuring your layout Create a new `resources/views/components/layouts/app.blade.php` layout file for Livewire components: ```blade