feat: add tailwind class sort plugin (#1562)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Updated code formatting tools to include support for Tailwind
CSS-specific formatting.
* Adjusted code formatting issue reporting from errors to warnings for a
smoother development experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: mdatelle <mike@datelle.net>
Co-authored-by: Eli Bosley <ekbosley@gmail.com>

pnpm-lock.yaml

@@ -985,6 +985,9 @@ importers:
       prettier:
         specifier: 3.6.2
         version: 3.6.2
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.14
+        version: 0.6.14(@ianvs/prettier-plugin-sort-imports@4.6.3(@vue/compiler-sfc@3.5.20)(prettier@3.6.2))(prettier@3.6.2)
       rimraf:
         specifier: 6.0.1
         version: 6.0.1
@@ -1257,6 +1260,9 @@ importers:
       prettier:
         specifier: 3.6.2
         version: 3.6.2
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.14
+        version: 0.6.14(@ianvs/prettier-plugin-sort-imports@4.6.3(@vue/compiler-sfc@3.5.20)(prettier@3.6.2))(prettier@3.6.2)
       shadcn-nuxt:
         specifier: 2.2.0
         version: 2.2.0(magicast@0.3.5)
@@ -11162,6 +11168,67 @@ packages:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
     engines: {node: '>=6.0.0'}
 
+  prettier-plugin-tailwindcss@0.6.14:
+    resolution: {integrity: sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
   prettier@3.6.2:
     resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
     engines: {node: '>=14'}
@@ -24962,6 +25029,12 @@ snapshots:
     dependencies:
       fast-diff: 1.3.0
 
+  prettier-plugin-tailwindcss@0.6.14(@ianvs/prettier-plugin-sort-imports@4.6.3(@vue/compiler-sfc@3.5.20)(prettier@3.6.2))(prettier@3.6.2):
+    dependencies:
+      prettier: 3.6.2
+    optionalDependencies:
+      '@ianvs/prettier-plugin-sort-imports': 4.6.3(@vue/compiler-sfc@3.5.20)(prettier@3.6.2)
+
   prettier@3.6.2: {}
 
   pretty-bytes@6.1.1: {}
@@ -27412,7 +27485,7 @@ snapshots:
       acorn: 8.15.0
       browserslist: 4.25.1
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.18.1
+      enhanced-resolve: 5.18.3
       es-module-lexer: 1.7.0
       eslint-scope: 5.1.1
       events: 3.3.0

unraid-ui/.prettierrc.json

@@ -1,8 +1,7 @@
-
 {
   "trailingComma": "es5",
   "tabWidth": 2,
   "printWidth": 105,
   "singleQuote": true,
-  "plugins": ["@ianvs/prettier-plugin-sort-imports"]
+  "plugins": ["@ianvs/prettier-plugin-sort-imports", "prettier-plugin-tailwindcss"]
 }

unraid-ui/eslint.config.ts

@@ -19,7 +19,7 @@ const commonRules = {
     'error',
     { allowSameFolder: false, rootDir: 'src', prefix: '@' },
   ],
-  'prettier/prettier': 'error',
+  'prettier/prettier': 'warn',
   'no-restricted-globals': [
     'error',
     {

unraid-ui/package.json

@@ -98,6 +98,7 @@
     "jiti": "2.5.1",
     "postcss": "8.5.6",
     "prettier": "3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "rimraf": "6.0.1",
     "storybook": "9.1.3",
     "tailwindcss": "4.1.12",

web/.prettierrc.mjs

@@ -7,7 +7,7 @@ const config = {
   tabWidth: 2,
   printWidth: 105,
   singleQuote: true,
-  plugins: ['@ianvs/prettier-plugin-sort-imports'],
+  plugins: ['@ianvs/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
   // decorators-legacy lets the import sorter transform files with decorators
   importOrderParserPlugins: ['typescript', 'decorators-legacy'],
   importOrder: [

web/package.json

@@ -73,6 +73,7 @@
     "nuxt": "3.18.1",
     "nuxt-custom-elements": "2.0.0-beta.32",
     "prettier": "3.6.2",
+    "prettier-plugin-tailwindcss": "^0.6.14",
     "shadcn-nuxt": "2.2.0",
     "tailwindcss": "4.1.12",
     "terser": "5.43.1",