chore: remove rustywind in favor of prettier-plugin-tailwindcss

.github/workflows/format.yml

@@ -58,31 +58,7 @@ jobs:
           CI: true
 
       - name: Run prettier
-        run: yarn run prettier --write 'resources/**/*.{css,js,vue}'
-
-      - uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: "style: resolve style guide violations"
-          branch: ${{ github.head_ref }}
-
-  rustywind:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          ref: ${{ github.head_ref }}
-          token: ${{ secrets.GH_TOKEN }}
-
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 24
-
-      - name: Format
-        run: |
-          export PATH="$(yarn global bin):$PATH"
-          yarn global add rustywind
-          rustywind --write resources/views
+        run: yarn run prettier --write 'resources/**/*.{css,js,vue,blade.php}'
 
       - uses: stefanzweifel/git-auto-commit-action@v5
         with:

.prettierrc

@@ -1,3 +1,14 @@
 {
-  "tabWidth": 4
+  "tabWidth": 4,
+  "plugins": ["@shufo/prettier-plugin-blade"],
+  "overrides": [
+    {
+      "files": ["*.blade.php"],
+      "options": {
+        "parser": "blade",
+        "sortTailwindcssClasses": true,
+        "tailwindcssConfigPath": "./resources/tailwind.config.js"
+      }
+    }
+  ]
 }

package.json

@@ -4,11 +4,12 @@
         "prettier": "^3.9.4"
     },
     "devDependencies": {
-        "glob": "^13.0.6",
+        "@shufo/prettier-plugin-blade": "^1.16.2",
+        "@tailwindcss/postcss": "^4.3.2",
         "body-scroll-lock": "4.0.0-beta.0",
         "focus-trap": "^8.2.2",
+        "glob": "^13.0.6",
         "tailwindcss": "^4.3.2",
-        "@tailwindcss/postcss": "^4.3.2",
         "tippy.js": "^6.3.7"
     },
     "scripts": {

resources/views/accordion-group.blade.php

@@ -1,30 +1,21 @@
 <div x-data="{ openPanel: null }">
     <dl>
-        @for($i = 0; $i < $slots; $i++)
-            <div class="border border-theme-secondary-200 rounded-xl p-6 @if($i > 0) mt-5 @endif">
+        @for ($i = 0; $i < $slots; $i++)
+            <div class="@if ($i > 0) mt-5 @endif rounded-xl border border-theme-secondary-200 p-6">
                 <dt>
-                    <button
-                        type="button"
-                        class="flex justify-between items-center w-full text-left focus:outline-none text-theme-primary-600"
+                    <button type="button"
+                        class="flex w-full items-center justify-between text-left text-theme-primary-600 focus:outline-none"
                         :class="{ 'mb-5': openPanel === {{ $i }} }"
-                        @click="openPanel = (openPanel === {{ $i }} ? null : {{ $i }})"
-                    >
+                        @click="openPanel = (openPanel === {{ $i }} ? null : {{ $i }})">
                         <span class="text-lg font-semibold">
                             {{ ${"title_{$i}"} }}
                         </span>
-                        <span class="flex items-center ml-6 h-7">
-                            <x-ark-chevron-toggle
-                                is-open="openPanel === {{ $i }}"
-                                class="transform"
-                            />
+                        <span class="ml-6 flex h-7 items-center">
+                            <x-ark-chevron-toggle is-open="openPanel === {{ $i }}" class="transform" />
                         </span>
                     </button>
                 </dt>
-                <dd
-                    class="mt-2"
-                    x-show="openPanel === {{ $i }}"
-                    x-transition.opacity
-                    x-cloak>
+                <dd class="mt-2" x-show="openPanel === {{ $i }}" x-transition.opacity x-cloak>
                     {{ ${"slot_{$i}"} }}
                 </dd>
             </div>

resources/views/accordion.blade.php

@@ -1,56 +1,46 @@
 @props([
     'title',
     'slot',
-    'dark'            => false,
-    'border'          => true,
-    'leftBorder'      => false,
-    'containerClass'  => '',
-    'titleClass'      => 'text-lg font-semibold',
-    'iconClass'       => 'text-theme-secondary-700',
-    'iconSize'        => 'xs',
-    'toggleTitle'     => false,
-    'iconOpenClass'   => 'rotate-180',
+    'dark' => false,
+    'border' => true,
+    'leftBorder' => false,
+    'containerClass' => '',
+    'titleClass' => 'text-lg font-semibold',
+    'iconClass' => 'text-theme-secondary-700',
+    'iconSize' => 'xs',
+    'toggleTitle' => false,
+    'iconOpenClass' => 'rotate-180',
     'iconClosedClass' => '',
-    'borderlessIcon'  => false,
-    'contentClass'    => 'px-4',
-    'buttonClass'     => 'px-8 md:px-4 py-6',
+    'borderlessIcon' => false,
+    'contentClass' => 'px-4',
+    'buttonClass' => 'px-8 md:px-4 py-6',
     'buttonOpenClass' => '',
-    'onToggle'        => null,
+    'onToggle' => null,
 ])
 
-<div
-    {{ $attributes->class('accordion group') }}
-    x-data="{
-        openPanel: false,
-        toggle: function () {
-            this.openPanel = ! this.openPanel;
-            @if($onToggle)
-                ({{ $onToggle }}).call(this);
-            @endif
-        },
-    }"
-    :class="{ 'accordion-open': openPanel }"
->
+<div {{ $attributes->class('accordion group') }} x-data="{
+    openPanel: false,
+    toggle: function() {
+        this.openPanel = !this.openPanel;
+        @if ($onToggle) ({{ $onToggle }}).call(this); @endif
+    },
+}" :class="{ 'accordion-open': openPanel }">
     <dl>
         <div @class([
             $containerClass,
-            'border-t border-theme-secondary-300 md:border-2 md:border-theme-primary-100 md:rounded-xl' => $dark === false && $border,
+            'border-t border-theme-secondary-300 md:border-2 md:border-theme-primary-100 md:rounded-xl' =>
+                $dark === false && $border,
         ])>
             <dt>
-                <button
-                    @click="toggle"
-                    @class([
-                        'accordion-trigger',
-                        $buttonClass,
-                        'text-theme-secondary-400' => $dark,
-                        'text-theme-secondary-900' => ! $dark,
-                    ])
-                    @if($buttonOpenClass)
-                        :class="{ '{{ $buttonOpenClass }}': openPanel }"
-                    @endif
-                >
+                <button @click="toggle" @class([
+                    'accordion-trigger',
+                    $buttonClass,
+                    'text-theme-secondary-400' => $dark,
+                    'text-theme-secondary-900' => !$dark,
+                ])
+                    @if ($buttonOpenClass) :class="{ '{{ $buttonOpenClass }}': openPanel }" @endif>
                     <div class="{{ $titleClass }}">
-                        @if($toggleTitle)
+                        @if ($toggleTitle)
                             <span x-show="openPanel" x-cloak>
                                 @lang('ui::actions.hide') {{ $title }}
                             </span>
@@ -63,39 +53,28 @@
                         @endif
                     </div>
 
-                    <div class="
-                        flex justify-center items-center w-8 h-8 rounded-lg transition-default
-                        @unless ($borderlessIcon)
+                    <div
+                        class="transition-default @unless ($borderlessIcon)
                         border-2 border-theme-primary-100 group-hover:border-theme-primary-400
-                        @endunless
-                    ">
+                        @endunless flex h-8 w-8 items-center justify-center rounded-lg">
                         <span
                             :class="{
                                 '{{ $iconOpenClass }}': openPanel,
                                 '{{ $iconClosedClass }}': !openPanel
                             }"
-                            @class([
-                                'transition duration-150 ease-in-out transform',
-                                $iconClass,
-                            ])
-                        >
+                            @class(['transition duration-150 ease-in-out transform', $iconClass])>
                             <x-ark-icon name="arrows.chevron-down-small" :size="$iconSize" />
                         </span>
                     </div>
                 </button>
             </dt>
 
-            <dd
-                @class([
-                    $contentClass,
-                    'border-theme-secondary-800' => $dark,
-                    'border-theme-secondary-300' => ! $dark,
-                    'border-l' => $dark || $leftBorder,
-                ])
-                x-show="openPanel"
-                x-transition.opacity
-                x-cloak
-            >
+            <dd @class([
+                $contentClass,
+                'border-theme-secondary-800' => $dark,
+                'border-theme-secondary-300' => !$dark,
+                'border-l' => $dark || $leftBorder,
+            ]) x-show="openPanel" x-transition.opacity x-cloak>
                 {{ $slot }}
             </dd>
         </div>

resources/views/alert.blade.php

@@ -1,28 +1,15 @@
 @props([
-    'message'     => null,
-    'type'        => \ARKEcosystem\Foundation\UserInterface\Support\Enums\AlertType::INFO,
+    'message' => null,
+    'type' => \ARKEcosystem\Foundation\UserInterface\Support\Enums\AlertType::INFO,
     'dismissible' => false,
-    'title'       => null,
+    'title' => null,
 ])
 
-<div
-    {{ $attributes->class(['alert-wrapper alert-'.$type]) }}
-    @if($dismissible)
-        x-data="{ show: true }"
-    @endif
->
-    <div
-        class="alert-content-wrapper"
-        @if($dismissible)
-            x-show="show"
-        @endif
-    >
+<div {{ $attributes->class(['alert-wrapper alert-' . $type]) }}
+    @if ($dismissible) x-data="{ show: true }" @endif>
+    <div class="alert-content-wrapper" @if ($dismissible) x-show="show" @endif>
         <h2 class="alert-title">
-            <x-ark-icon
-                :name="alertIcon($type)"
-                class="alert-icon"
-                size="sm"
-            />
+            <x-ark-icon :name="alertIcon($type)" class="alert-icon" size="sm" />
 
             <span>
                 @if ($title)
@@ -32,19 +19,15 @@ class="alert-icon"
                 @endif
             </span>
 
-            @if($dismissible)
-                <button
-                    type="button"
-                    @click="show = false"
-                    aria-label="@lang ('ui::alert.dismiss')"
-                >
+            @if ($dismissible)
+                <button type="button" @click="show = false" aria-label="@lang ('ui::alert.dismiss')">
                     <x-ark-icon name="cross" size="xs" aria-hidden="true" focusable="false" />
                 </button>
             @endif
         </h2>
 
         <span class="alert-content">
-            @if($message !== null)
+            @if ($message !== null)
                 {{ $message }}
             @else
                 {{ $slot }}

resources/views/avatar.blade.php

@@ -1,5 +1,9 @@
-<div {{ $attributes->merge(['class' => 'avatar-wrapper overflow-hidden ' . $attributes->get('class', 'w-10 h-10 rounded-xl md:h-11 md:w-11')]) }}>
-    <div class="object-cover w-full h-full">
-        {!! ARKEcosystem\Foundation\UserInterface\Support\Avatar::make($identifier, $attributes->get('show-identifier-letters')) !!}
+<div
+    {{ $attributes->merge(['class' => 'avatar-wrapper overflow-hidden ' . $attributes->get('class', 'w-10 h-10 rounded-xl md:h-11 md:w-11')]) }}>
+    <div class="h-full w-full object-cover">
+        {!! ARKEcosystem\Foundation\UserInterface\Support\Avatar::make(
+            $identifier,
+            $attributes->get('show-identifier-letters'),
+        ) !!}
     </div>
 </div>

resources/views/chart.blade.php

@@ -17,39 +17,27 @@
     'dateUnitOverride' => null,
 ])
 
-<div
-    x-data="CustomChart(
-        '{{ $id }}',
-        {{ $data }},
-        {{ $labels }},
-        '{{ $grid }}',
-        '{{ $tooltips }}',
-        {{ json_encode($theme->toArray()) }},
-        '{{ time() }}',
-        '{{ $currency }}',
-        {{ $yPadding }},
-        {{ $xPadding }},
-        {{ $showCrosshair ? 'true' : 'false' }},
-        {{ $tooltipHandler ? $tooltipHandler : 'null' }},
-        {{ $hasDateTimeLabels ? 'true' : 'false' }},
-        @if ($dateUnitOverride)
-            '{{ $dateUnitOverride }}',
+<div x-data="CustomChart(
+    '{{ $id }}',
+    {{ $data }},
+    {{ $labels }},
+    '{{ $grid }}',
+    '{{ $tooltips }}',
+    {{ json_encode($theme->toArray()) }},
+    '{{ time() }}',
+    '{{ $currency }}',
+    {{ $yPadding }},
+    {{ $xPadding }},
+    {{ $showCrosshair ? 'true' : 'false' }},
+    {{ $tooltipHandler ? $tooltipHandler : 'null' }},
+    {{ $hasDateTimeLabels ? 'true' : 'false' }},
+    @if ($dateUnitOverride) '{{ $dateUnitOverride }}',
         @else
-            null,
-        @endif
-    )"
-    wire:key="{{ $id.time() }}"
-    {{ $attributes->only('class') }}
->
-    <div
-        class="relative w-full h-full"
-        wire:ignore
-    >
-        <canvas
-            x-ref="{{ $id }}"
-            @if($canvasClass) class="{{ $canvasClass }}" @endif
-            @if($width) width="{{ $width }}" @endif
-            @if($height) height="{{ $height }}" @endif
-        ></canvas>
+            null, @endif
+)" wire:key="{{ $id . time() }}" {{ $attributes->only('class') }}>
+    <div class="relative h-full w-full" wire:ignore>
+        <canvas x-ref="{{ $id }}" @if ($canvasClass) class="{{ $canvasClass }}" @endif
+            @if ($width) width="{{ $width }}" @endif
+            @if ($height) height="{{ $height }}" @endif></canvas>
     </div>
 </div>

resources/views/chevron-toggle.blade.php

@@ -1,16 +1,9 @@
-@props([
-    'isOpen',
-    'size' => 'xs',
-    'openClass' => null,
-    'closedClass' => null,
-])
+@props(['isOpen', 'size' => 'xs', 'openClass' => null, 'closedClass' => null])
 
-<span
-    {{ $attributes->class('transition duration-150 ease-in-out') }}
+<span {{ $attributes->class('transition duration-150 ease-in-out') }}
     :class="{
         '{{ Arr::toCssClasses(['rotate-180', $openClass]) }}': {{ $isOpen }},
-        '{{ Arr::toCssClasses([$closedClass]) }}': ! ({{ $isOpen }}),
-    }"
->
+        '{{ Arr::toCssClasses([$closedClass]) }}': !({{ $isOpen }}),
+    }">
     <x-ark-icon name="arrows.chevron-down-small" :size="$size" />
 </span>