How do I create a custom stylesheet for Filament's UI

1. Install Tailwind CSS and related plugins:
Filament uses Tailwind CSS, so you'll need to install Tailwind CSS, the Tailwind Forms plugin, and the Tailwind Typography plugin. You can do this using npm or yarn:

bash
   npm install -D tailwindcss @tailwindcss/forms @tailwindcss/typography
   

2. Create a Tailwind CSS configuration file:
Run the following command to generate a `tailwind.config.js` file:

bash
   npx tailwindcss init
   

In the generated `tailwind.config.js` file, add the Filament-related paths to the `content` section:

javascript
   module.exports = {
     content: [
       './resources/**/*.blade.php',
       './vendor/filament/**/*.blade.php',
     ],
     // ... rest of the configuration
   }
   

3. Create a custom Filament theme:
You can use the Filament CLI to generate a new theme:

bash
   php artisan make:filament-theme
   

This will create a new CSS file in the `resources/css/filament` directory, which you can customize.

4. Customize the theme:
Open the generated CSS file (e.g., `resources/css/filament/theme.css`) and start customizing the styles. You can change the colors, fonts, and other UI elements to match your branding and design requirements.

Here's an example of how you can customize the colors:

css
   @import 'tailwindcss/base';
   @import 'tailwindcss/components';
   @import 'tailwindcss/utilities';

   :root {
     --color-primary-50: 238 242 255;
     --color-primary-100: 224 231 255;
     --color-primary-200: 199 210 254;
     --color-primary-300: 165 180 252;
     --color-primary-400: 129 140 248;
     --color-primary-500: 99 102 241;
     --color-primary-600: 79 70 229;
     --color-primary-700: 67 56 202;
     --color-primary-800: 55 48 163;
     --color-primary-900: 49 46 129;
     --color-primary-950: 30 27 75;
   }
   

5. Register the custom theme:
In your application's service provider (e.g., `AppServiceProvider`), register the custom theme using the `Filament::registerViteTheme()` method:

php
   use Filament\Facades\Filament;

   public function boot()
   {
       Filament::registerViteTheme('resources/css/filament/theme.css');
   }
   

This will replace the default Filament theme with your custom one.

6. Compile the assets:
If you're using Vite, make sure to add the custom theme file to the `input` array in your `vite.config.js` file:

javascript
   export default defineConfig({
     plugins: [
       laravel({
         input: [
           'resources/css/filament/theme.css',
           'resources/js/app.js',
         ],
         // ...
       }),
     ],
   });
   

Then, run `npm run build` (or `yarn build`) to compile the assets.

By following these steps, you can create a custom stylesheet for Filament's UI that aligns with your application's branding and design requirements.