docs

filamentphp · Dec 24, 2023 · 97cdb59 · 97cdb59
1 parent 3da9864
commit 97cdb59
Show file tree

Hide file tree

Showing 24 changed files with 1,024 additions and 38 deletions.
diff --git a/docs/dist/3.x/actions/installation/index.html b/docs/dist/3.x/actions/installation/index.html
@@ -849,7 +849,7 @@ <h2 id="existing-laravel-projects"><a class="heading-anchor" href="#existing-lar
 </textarea></code></pre>
 <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>
 <p>Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins:</p>
-<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</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;">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 @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev
+<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</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 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev
 </textarea></code></pre>
 <p>Create a new <code>tailwind.config.js</code> file and add the Filament <code>preset</code> <em>(includes the Filament color scheme and the required Tailwind plugins)</em>:</p>
 <pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-js"><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color: #89DDFF;">import</span><span style="color: #A6ACCD;"> preset </span><span style="color: #89DDFF;">from</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">./vendor/filament/support/tailwind.config.preset</span><span style="color: #89DDFF;">&#39;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #89DDFF;">export</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">default</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #F07178;">presets</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> [preset]</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #F07178;">content</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> [</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">./app/Filament/**/*.php</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">./resources/views/filament/**/*.blade.php</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">./vendor/filament/**/*.blade.php</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">    ]</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">import preset from './vendor/filament/support/tailwind.config.preset'
@@ -869,9 +869,10 @@ <h3 id="configuring-styles"><a class="heading-anchor" href="#configuring-styles"
 @tailwind components;
 @tailwind utilities;
 </textarea></code></pre>
-<p>Create a <code>postcss.config.js</code> file in the root of your project and register Tailwind CSS and Autoprefixer as plugins:</p>
-<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-js"><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color: #89DDFF;">export</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">default</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #F07178;">plugins</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #F07178;">tailwindcss</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{},</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #F07178;">autoprefixer</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{},</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">},</span></div><div class='line'><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">export default {
+<p>Create a <code>postcss.config.js</code> file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins:</p>
+<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-js"><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color: #89DDFF;">export</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">default</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #F07178;">plugins</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">&#39;</span><span style="color: #F07178;">tailwindcss/nesting</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">postcss-nesting</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #F07178;">tailwindcss</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{},</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #F07178;">autoprefixer</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{},</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">},</span></div><div class='line'><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">export default {
     plugins: {
+        'tailwindcss/nesting': 'postcss-nesting',
         tailwindcss: {},
         autoprefixer: {},
     },

diff --git a/docs/dist/3.x/forms/installation/index.html b/docs/dist/3.x/forms/installation/index.html
@@ -1001,7 +1001,7 @@ <h2 id="existing-laravel-projects"><a class="heading-anchor" href="#existing-lar
 </textarea></code></pre>
 <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>
 <p>Run the following command to install Tailwind CSS with the Tailwind Forms and Typography plugins:</p>
-<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</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;">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 @tailwindcss/forms @tailwindcss/typography postcss autoprefixer --save-dev
+<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</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 @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev
 </textarea></code></pre>
 <p>Create a new <code>tailwind.config.js</code> file and add the Filament <code>preset</code> <em>(includes the Filament color scheme and the required Tailwind plugins)</em>:</p>
 <pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-js"><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color: #89DDFF;">import</span><span style="color: #A6ACCD;"> preset </span><span style="color: #89DDFF;">from</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">./vendor/filament/support/tailwind.config.preset</span><span style="color: #89DDFF;">&#39;</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #89DDFF;">export</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">default</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #F07178;">presets</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> [preset]</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #F07178;">content</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> [</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">./app/Filament/**/*.php</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">./resources/views/filament/**/*.blade.php</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">./vendor/filament/**/*.blade.php</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">    ]</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">import preset from './vendor/filament/support/tailwind.config.preset'
@@ -1021,9 +1021,10 @@ <h3 id="configuring-styles"><a class="heading-anchor" href="#configuring-styles"
 @tailwind components;
 @tailwind utilities;
 </textarea></code></pre>
-<p>Create a <code>postcss.config.js</code> file in the root of your project and register Tailwind CSS and Autoprefixer as plugins:</p>
-<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-js"><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color: #89DDFF;">export</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">default</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #F07178;">plugins</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #F07178;">tailwindcss</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{},</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #F07178;">autoprefixer</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{},</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">},</span></div><div class='line'><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">export default {
+<p>Create a <code>postcss.config.js</code> file in the root of your project and register Tailwind CSS, PostCSS Nesting and Autoprefixer as plugins:</p>
+<pre class="torchlight" style="background-color: #292D3E; --theme-selection-background: #00000080;" data-torchlight-processed="3449c9e5e332f1dbb81505cd739fbf3f"><code class="language-js"><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color: #89DDFF;">export</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">default</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #F07178;">plugins</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #89DDFF;">&#39;</span><span style="color: #F07178;">tailwindcss/nesting</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">&#39;</span><span style="color: #C3E88D;">postcss-nesting</span><span style="color: #89DDFF;">&#39;</span><span style="color: #89DDFF;">,</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #F07178;">tailwindcss</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{},</span></div><div class='line'><span style="color: #A6ACCD;">        </span><span style="color: #F07178;">autoprefixer</span><span style="color: #89DDFF;">:</span><span style="color: #A6ACCD;"> </span><span style="color: #89DDFF;">{},</span></div><div class='line'><span style="color: #A6ACCD;">    </span><span style="color: #89DDFF;">},</span></div><div class='line'><span style="color: #89DDFF;">}</span></div><textarea data-torchlight-original="true" style="display: none !important;">export default {
     plugins: {
+        'tailwindcss/nesting': 'postcss-nesting',
         tailwindcss: {},
         autoprefixer: {},
     },