Filament v4: Tailwind Classes in Blade? You NEED Custom Theme.

Filament V4 introduces a significant shift in how custom styling is handled, making custom themes a necessity for many developers. This change is largely driven by updates to Tailwind CSS integration. Previously, in Filament V3, custom Tailwind classes often worked out-of-the-box due to internal configurations and the use of Tailwind 3. However, Filament V4 adopts a different approach, demanding explicit configuration through custom themes to ensure that custom Tailwind classes are correctly compiled and applied.

Understanding the difference between Filament V3 and V4 is crucial. In V3, the framework included pre-compiled Tailwind configurations (tailwind.config.js presets) that managed various color variants and settings internally. This meant that developers could often use custom Tailwind classes without additional setup. However, V4 moves away from this by requiring a `theme.css` file where developers must explicitly define the source directories containing their custom Tailwind classes.

To address the styling needs in Filament V4, the framework provides a command to generate a theme CSS file. Running `php artisan filament theme` creates a dedicated CSS file. Within this file, you must add specific lines to point to the folders where your custom Tailwind classes reside. For instance, if custom classes are used within table columns defined in `resources/views/tables/columns`, that directory path needs to be included in the theme configuration.

The documentation suggests adding two lines, but for custom class integration, a third line specifying your custom views directory, such as `resources/views/tables`, is essential. This tells the build process where to look for your custom styling directives. Without this explicit path, the custom classes will not be recognized or compiled into the final CSS bundle. The general information from the documentation outlines how to initiate this process, starting with the `filament theme` command.

As an experiment, if the line pointing to the custom views directory is removed from the `theme.css` file and the build process is run (`npm run build`), the compilation may still succeed. However, upon refreshing the page, any elements styled with those custom Tailwind classes will appear unstyled, lacking their intended colors and appearance because they were not compiled into the final CSS.

Adding the source path back and recompiling (`npm run build`) restores the necessary styles. This demonstrates the critical dependency on correctly configured theme sources for custom Tailwind classes to function in Filament V4.

This principle extends beyond tables to any custom-built pages. For example, if you create a new page, perhaps an 'about us' page, and embed a `div` with custom Tailwind classes directly in its corresponding Blade file, these styles will also be absent upon the initial refresh if the theme configuration doesn't include the relevant view directory.

Running `npm run build` after adding the custom page's view directory to the theme configuration will enable the styling. Conversely, removing the theme configuration that points to custom page resources (`resources/views/filament` for custom pages) and then recompiling will again result in the styling being lost.

In V4, if you have any custom Tailwind classes in your blade views or PHP files, you need a custom theme.

The necessity of custom themes in Filament V4 for any custom Tailwind classes in Blade views or PHP files is clear. While setting up these themes is straightforward, developers accustomed to V3's behavior might encounter unexpected unstyled elements. If you face issues or have questions about themes or Tailwind in V4, sharing them in the comments can lead to future video explanations.

For those seeking practical examples, the filamentexamples.com website offers a valuable resource. Currently, 17 projects are being upgraded to V4, and the website itself is undergoing improvements for easier searching. Access to both V3 and V4 examples is available through a GitHub repository, which can be obtained by purchasing a membership.