enable useSortedClasses

apps/web/app/_components/Footer.tsx

@@ -1,7 +1,7 @@
 export const Footer = ({ className }: { className?: string }) => {
   return (
     <footer className={`${className} flex border-t border-zinc-200 p-4 dark:border-zinc-600`}>
-      <p className="text-xs leading-5 text-zinc-500 dark:text-zinc-400">
+      <p className="text-xs text-zinc-500 leading-5 dark:text-zinc-400">
         &copy; 2024 Hirotaka Miyagi, All rights reserved.
       </p>
     </footer>

apps/web/app/_components/Icons.tsx

@@ -3,7 +3,7 @@ import type { ComponentProps } from "react";
 const Icon = (props: ComponentProps<"svg">) => {
   return (
     <svg
-      className="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300"
+      className="h-6 w-6 fill-zinc-500 transition dark:fill-zinc-400 dark:group-hover:fill-zinc-300 group-hover:fill-zinc-600"
       {...props}
     />
   );

apps/web/app/_features/articles/Tag.tsx

@@ -14,7 +14,7 @@ export const Tag = ({ tag }: Props) => {
     <UniversalLink
       href={`/articles/tags/${tag}`}
       isEnabledUnderline
-      className="rounded-sm border border-zinc-200 px-1 py-0.5 text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-500"
+      className="rounded-sm border border-zinc-200 px-1 py-0.5 text-xs text-zinc-500 dark:hover:text-zinc-500 hover:text-zinc-700"
     >
       {label}
     </UniversalLink>

apps/web/app/_features/colorMode/ColorModeToggle.tsx

@@ -29,11 +29,11 @@ export const ColorModeToggle = () => {
     <button
       type="button"
       aria-label="Toggle dark mode"
-      className="group rounded-sm bg-white/90 px-3 py-2 ring-1 ring-zinc-900/5 backdrop-blur-[8px] transition duration-150 ease-in-out dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
+      className="group rounded-sm bg-white/90 px-3 py-2 ring-1 ring-zinc-900/5 backdrop-blur-[8px] transition duration-150 ease-in-out dark:bg-zinc-800/90 dark:hover:ring-white/20 dark:ring-white/10"
       onClick={toggleMode}
     >
-      <SunIcon className="h-6 w-6 fill-zinc-100 stroke-zinc-500 transition group-hover:fill-zinc-200 group-hover:stroke-zinc-700 dark:hidden [@media(prefers-color-scheme:dark)]:fill-teal-50 [@media(prefers-color-scheme:dark)]:stroke-teal-500 [@media(prefers-color-scheme:dark)]:group-hover:fill-teal-50 [@media(prefers-color-scheme:dark)]:group-hover:stroke-teal-600" />
-      <MoonIcon className="hidden h-6 w-6 fill-zinc-700 stroke-zinc-500 transition dark:block [@media(prefers-color-scheme:dark)]:group-hover:stroke-zinc-400 [@media_not_(prefers-color-scheme:dark)]:fill-teal-400/10 [@media_not_(prefers-color-scheme:dark)]:stroke-teal-500" />
+      <SunIcon className="h-6 w-6 fill-zinc-100 stroke-zinc-500 transition dark:hidden [@media(prefers-color-scheme:dark)]:fill-teal-50 [@media(prefers-color-scheme:dark)]:group-hover:fill-teal-50 group-hover:fill-zinc-200 [@media(prefers-color-scheme:dark)]:group-hover:stroke-teal-600 [@media(prefers-color-scheme:dark)]:stroke-teal-500 group-hover:stroke-zinc-700" />
+      <MoonIcon className="hidden h-6 w-6 fill-zinc-700 stroke-zinc-500 transition dark:block [@media_not_(prefers-color-scheme:dark)]:fill-teal-400/10 [@media(prefers-color-scheme:dark)]:group-hover:stroke-zinc-400 [@media_not_(prefers-color-scheme:dark)]:stroke-teal-500" />
     </button>
   );
 };

apps/web/app/_features/richLinkCard/RichLinkCard.tsx

@@ -30,7 +30,7 @@ const RichLinkCardInner = ({ url, title, description, imageSrc }: RichLinkCardIn
         <div className="col-span-3 flex flex-col gap-2 p-2">
           <h2
             id={labelledBy}
-            className="overflow-hidden text-ellipsis whitespace-nowrap text-base font-bold"
+            className="overflow-hidden text-ellipsis whitespace-nowrap font-bold text-base"
           >
             {title}
           </h2>

apps/web/app/_features/share/Share.tsx

@@ -36,7 +36,7 @@ const Share = ({ shareData }: Props) => {
   return isShareSupported ? (
     <button
       type="button"
-      className="inline-flex items-center gap-2 rounded-sm border border-zinc-200 p-2 text-sm text-zinc-600 transition-colors duration-300 hover:border-zinc-500 hover:text-zinc-800 dark:border-zinc-700 dark:text-zinc-400 dark:hover:border-zinc-500 dark:hover:text-zinc-300"
+      className="inline-flex items-center gap-2 rounded-sm border border-zinc-200 p-2 text-sm text-zinc-600 transition-colors duration-300 dark:border-zinc-700 dark:hover:border-zinc-500 hover:border-zinc-500 dark:hover:text-zinc-300 dark:text-zinc-400 hover:text-zinc-800"
       onClick={handleClick}
     >
       <ShareIcon className="h-4 w-4" />

apps/web/app/articles/[slug]/_features/ArticleMetaDetail.tsx

@@ -14,7 +14,7 @@ export const ArticleMetaDetail = ({
 
   return (
     <div>
-      <h2 className="text-2xl font-extrabold">{title}</h2>
+      <h2 className="font-extrabold text-2xl">{title}</h2>
       <div className="my-6 flex justify-between">
         <div className="flex gap-2">
           {tags.map((tag) => (

apps/web/app/articles/page.tsx

@@ -6,7 +6,7 @@ import { ArticleList } from "../_features/articles";
 export default function Page() {
   return (
     <div className="grid gap-8">
-      <h1 className="flex items-center gap-2 text-3xl font-bold">
+      <h1 className="flex items-center gap-2 font-bold text-3xl">
         <span>Articles</span>
         <UniversalLink href="/articles/feed">
           <RssIcon className="h-6 w-6" />

apps/web/app/articles/tags/[tag]/page.tsx

@@ -19,7 +19,7 @@ export default function Page({ params: { tag: _tag } }: Props) {
 
   return (
     <div className="grid gap-8">
-      <h1 className="flex items-center gap-2 text-3xl font-bold">
+      <h1 className="flex items-center gap-2 font-bold text-3xl">
         <span>Articles - {label}</span>
       </h1>
       <ArticleList tag={tag} />

apps/web/app/dev/testing-markdown-renderer/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
 
   return (
     <main>
-      <h1 className="text-3xl font-bold sm:text-5xl">Testing Markdown Renderer</h1>
+      <h1 className="font-bold text-3xl sm:text-5xl">Testing Markdown Renderer</h1>
       <MarkdownContent filePath={filePath} handleNotFound={notFound} />
     </main>
   );

apps/web/app/page.tsx

@@ -8,7 +8,7 @@ export default function Page() {
     <div className="grid gap-4 sm:gap-8">
       <div className="flex flex-col items-center gap-4 sm:flex-row sm:gap-8">
         <MyAvatar />
-        <h1 className="text-3xl font-bold sm:text-5xl">Hirotaka Miyagi</h1>
+        <h1 className="font-bold text-3xl sm:text-5xl">Hirotaka Miyagi</h1>
       </div>
       <p>I'm a software engineer based in Tokyo, Japan.</p>
       <div className="flex gap-2 sm:gap-4">

biome.json

@@ -9,7 +9,10 @@
   "linter": {
     "enabled": true,
     "rules": {
-      "recommended": true
+      "recommended": true,
+      "nursery": {
+        "useSortedClasses": "error"
+      }
     }
   },
   "formatter": {

package.json

@@ -16,7 +16,7 @@
     "scaffold": "scaffdog generate"
   },
   "devDependencies": {
-    "@biomejs/biome": "1.5.2",
+    "@biomejs/biome": "1.5.3-nightly.24fcf19",
     "@project/configs": "workspace:^*",
     "dependency-cruiser": "^16.0.0",
     "eslint": "^8.42.0",

packages/eslint-config/package.json

@@ -9,7 +9,6 @@
     "@mh4gf/eslint-config": "^0.5.2",
     "eslint-config-next": "^14.0.0",
     "eslint-import-resolver-typescript": "^3.5.5",
-    "eslint-plugin-tailwindcss": "^3.12.1",
     "eslint-plugin-import-access": "^1.1.2"
   },
   "packageManager": "pnpm@8.12.1"

packages/eslint-config/src/base.cjs

@@ -1,7 +1,7 @@
 /** @type {import('eslint/lib/shared/types').ConfigData} */
 module.exports = {
   plugins: ["import-access"],
-  extends: ["@mh4gf/eslint-config", "plugin:tailwindcss/recommended"],
+  extends: ["@mh4gf/eslint-config"],
   parserOptions: { project: "./tsconfig.json" },
   settings: {
     "import/resolver": {