File tree Expand file tree Collapse file tree 14 files changed +88
-17
lines changed
resources/editing-records
plugins/build-a-panel-plugin Expand file tree Collapse file tree 14 files changed +88
-17
lines changed Original file line number Diff line number Diff line change @@ -883,6 +883,7 @@ <h2 id="requirements"><a class="heading-anchor" href="#requirements"><span class
883883< li > PHP 8.1+</ li >
884884< li > Laravel v10.0+</ li >
885885< li > Livewire v3.0+</ li >
886+ < li > Tailwind v3.0+ < a href ="#installing-tailwind-css "> (Using Tailwind v4?)</ a > </ li >
886887</ ul >
887888< h2 id ="installation "> < a class ="heading-anchor " href ="#installation "> < span class ="heading-anchor-icon " aria-hidden ="true "> #</ span > </ a > Installation</ h2 >
888889< p > Require the Actions package using Composer:</ p >
@@ -904,6 +905,9 @@ <h2 id="existing-laravel-projects"><a class="heading-anchor" href="#existing-lar
904905< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-bash "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> php</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> artisan</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> filament:install</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> --actions</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> php artisan filament:install --actions
905906</ textarea > </ code > </ pre >
906907< h3 id ="installing-tailwind-css "> < a class ="heading-anchor " href ="#installing-tailwind-css "> < span class ="heading-anchor-icon " aria-hidden ="true "> #</ span > </ a > Installing Tailwind CSS</ h3 >
908+ < blockquote >
909+ < p > 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.</ p >
910+ </ blockquote >
907911< p > Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins:</ p >
908912< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-bash "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> npm</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> install</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> tailwindcss@3</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> @tailwindcss/forms</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> @tailwindcss/typography</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> postcss</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> postcss-nesting</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> autoprefixer</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> --save-dev</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev
909913</ textarea > </ code > </ pre >
Load Diff Large diffs are not rendered by default.
Original file line number Diff line number Diff line change @@ -1179,6 +1179,7 @@ <h2 id="adding-icons-to-option-buttons"><a class="heading-anchor" href="#adding-
11791179
11801180 < img src ="https://github.com/filamentphp/filament/blob/3.x/docs-assets/screenshots/images/dark/forms/fields/toggle-buttons/icons.jpg?raw=true " alt ="Toggle buttons with icons " loading ="lazy " class ="rounded-xl hidden dark:block ">
11811181</ div >
1182+ < p > If you want to display only icons, you can use < code > hiddenButtonLabels()</ code > to hide the option labels.</ p >
11821183< h2 id ="boolean-options "> < a class ="heading-anchor " href ="#boolean-options "> < span class ="heading-anchor-icon " aria-hidden ="true "> #</ span > </ a > Boolean options</ h2 >
11831184< p > If you want a simple boolean toggle button group, with "Yes" and "No" options, you can use the < code > boolean()</ code > method:</ p >
11841185< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-php "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> ToggleButtons</ span > < span style ="color: #89DDFF; "> ::</ span > < span style ="color: #82AAFF; "> make</ span > < span style ="color: #89DDFF; "> (</ span > < span style ="color: #89DDFF; "> '</ span > < span style ="color: #C3E88D; "> feedback</ span > < span style ="color: #89DDFF; "> '</ span > < span style ="color: #89DDFF; "> )</ span > </ div > < div class ='line '> < span style ="color: #A6ACCD; "> </ span > < span style ="color: #89DDFF; "> -></ span > < span style ="color: #82AAFF; "> label</ span > < span style ="color: #89DDFF; "> (</ span > < span style ="color: #89DDFF; "> '</ span > < span style ="color: #C3E88D; "> Like this post?</ span > < span style ="color: #89DDFF; "> '</ span > < span style ="color: #89DDFF; "> )</ span > </ div > < div class ='line '> < span style ="color: #A6ACCD; "> </ span > < span style ="color: #89DDFF; "> -></ span > < span style ="color: #82AAFF; "> boolean</ span > < span style ="color: #89DDFF; "> ()</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> ToggleButtons::make('feedback')
Original file line number Diff line number Diff line change @@ -1123,6 +1123,7 @@ <h2 id="requirements"><a class="heading-anchor" href="#requirements"><span class
11231123< li > PHP 8.1+</ li >
11241124< li > Laravel v10.0+</ li >
11251125< li > Livewire v3.0+</ li >
1126+ < li > Tailwind v3.0+ < a href ="#installing-tailwind-css "> (Using Tailwind v4?)</ a > </ li >
11261127</ ul >
11271128< h2 id ="installation "> < a class ="heading-anchor " href ="#installation "> < span class ="heading-anchor-icon " aria-hidden ="true "> #</ span > </ a > Installation</ h2 >
11281129< p > Require the Form Builder package using Composer:</ p >
@@ -1144,6 +1145,9 @@ <h2 id="existing-laravel-projects"><a class="heading-anchor" href="#existing-lar
11441145< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-bash "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> php</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> artisan</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> filament:install</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> --forms</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> php artisan filament:install --forms
11451146</ textarea > </ code > </ pre >
11461147< h3 id ="installing-tailwind-css "> < a class ="heading-anchor " href ="#installing-tailwind-css "> < span class ="heading-anchor-icon " aria-hidden ="true "> #</ span > </ a > Installing Tailwind CSS</ h3 >
1148+ < blockquote >
1149+ < p > 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.</ p >
1150+ </ blockquote >
11471151< p > Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins:</ p >
11481152< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-bash "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> npm</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> install</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> tailwindcss@3</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> @tailwindcss/forms</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> @tailwindcss/typography</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> postcss</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> postcss-nesting</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> autoprefixer</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> --save-dev</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev
11491153</ textarea > </ code > </ pre >
Original file line number Diff line number Diff line change @@ -923,6 +923,7 @@ <h2 id="requirements"><a class="heading-anchor" href="#requirements"><span class
923923< li > PHP 8.1+</ li >
924924< li > Laravel v10.0+</ li >
925925< li > Livewire v3.0+</ li >
926+ < li > Tailwind v3.0+ < a href ="#installing-tailwind-css "> (Using Tailwind v4?)</ a > </ li >
926927</ ul >
927928< h2 id ="installation "> < a class ="heading-anchor " href ="#installation "> < span class ="heading-anchor-icon " aria-hidden ="true "> #</ span > </ a > Installation</ h2 >
928929< p > Require the Infolist Builder package using Composer:</ p >
@@ -944,6 +945,9 @@ <h2 id="existing-laravel-projects"><a class="heading-anchor" href="#existing-lar
944945< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-bash "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> php</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> artisan</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> filament:install</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> --infolists</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> php artisan filament:install --infolists
945946</ textarea > </ code > </ pre >
946947< h3 id ="installing-tailwind-css "> < a class ="heading-anchor " href ="#installing-tailwind-css "> < span class ="heading-anchor-icon " aria-hidden ="true "> #</ span > </ a > Installing Tailwind CSS</ h3 >
948+ < blockquote >
949+ < p > 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.</ p >
950+ </ blockquote >
947951< p > Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins:</ p >
948952< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-bash "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> npm</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> install</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> tailwindcss@3</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> @tailwindcss/forms</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> @tailwindcss/typography</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> postcss</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> postcss-nesting</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> autoprefixer</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> --save-dev</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev
949953</ textarea > </ code > </ pre >
Original file line number Diff line number Diff line change @@ -727,6 +727,7 @@ <h2 id="requirements"><a class="heading-anchor" href="#requirements"><span class
727727< li > PHP 8.1+</ li >
728728< li > Laravel v10.0+</ li >
729729< li > Livewire v3.0+</ li >
730+ < li > Tailwind v3.0+ < a href ="#installing-tailwind-css "> (Using Tailwind v4?)</ a > </ li >
730731</ ul >
731732< p > Require the Notifications package using Composer:</ p >
732733< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-bash "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> composer</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> require</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> filament/notifications:</ span > < span style ="color: #89DDFF; "> "</ span > < span style ="color: #C3E88D; "> ^3.2</ span > < span style ="color: #89DDFF; "> "</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> -W</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> composer require filament/notifications:"^3.2" -W
@@ -747,6 +748,9 @@ <h2 id="existing-laravel-projects"><a class="heading-anchor" href="#existing-lar
747748< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-bash "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> php</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> artisan</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> filament:install</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> --notifications</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> php artisan filament:install --notifications
748749</ textarea > </ code > </ pre >
749750< h3 id ="installing-tailwind-css "> < a class ="heading-anchor " href ="#installing-tailwind-css "> < span class ="heading-anchor-icon " aria-hidden ="true "> #</ span > </ a > Installing Tailwind CSS</ h3 >
751+ < blockquote >
752+ < p > 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.</ p >
753+ </ blockquote >
750754< p > Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins:</ p >
751755< pre class ="torchlight " style ="background-color: #292D3E; --theme-selection-background: #00000080; " data-torchlight-processed ="3449c9e5e332f1dbb81505cd739fbf3f "> < code class ="language-bash "> <!-- Syntax highlighted by torchlight.dev --> < div class ='line '> < span style ="color: #FFCB6B; "> npm</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> install</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> tailwindcss@3</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> @tailwindcss/forms</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> @tailwindcss/typography</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> postcss</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> postcss-nesting</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> autoprefixer</ span > < span style ="color: #A6ACCD; "> </ span > < span style ="color: #C3E88D; "> --save-dev</ span > </ div > < textarea data-torchlight-original ="true " style ="display: none !important; "> npm install tailwindcss@3 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev
752756</ textarea > </ code > </ pre >
You can’t perform that action at this time.
0 commit comments