enable tailwind class sorting

biome.json

@@ -30,6 +30,9 @@
 				"noConstEnum": "off",
 				"noExplicitAny": "off",
 				"noMisrefactoredShorthandAssign": "error"
+			},
+			"nursery": {
+				"useSortedClasses": "error"
 			}
 		}
 	},

src/app/(legal)/privacy/page.tsx

@@ -8,10 +8,10 @@ export default function PrivacyPolicy() {
 	});
 
 	return (
-		<div className="flex flex-col items-center">
-			<h1 className="text-2xl font-bold">Privacy Policy</h1>
+		<div className="container mx-auto mt-5 flex flex-col items-center">
+			<h1 className="font-bold text-2xl">Privacy Policy</h1>
 
-			<p className="mb-5 tracking-tighter text-white/75">Last modified: {lastModified}</p>
+			<p className="mb-5 text-white/75 tracking-tighter">Last modified: {lastModified}</p>
 
 			<main className="mb-8 flex max-w-7xl flex-col gap-5 px-4">
 				<p className="text-white/75">
@@ -25,7 +25,7 @@ export default function PrivacyPolicy() {
 					use or share your information with anyone except as described in this Privacy Policy.
 				</p>
 
-				<a href="#information-collection" id="information-collection" className="mt-5 text-2xl font-semibold">
+				<a href="#information-collection" id="information-collection" className="mt-5 font-semibold text-2xl">
 					Information Collection and Use
 				</a>
 
@@ -35,7 +35,7 @@ export default function PrivacyPolicy() {
 					retained by us and used as described in this privacy policy.
 				</p>
 
-				<a href="#log-data" id="log-data" className="mt-5 text-2xl font-semibold">
+				<a href="#log-data" id="log-data" className="mt-5 font-semibold text-2xl">
 					Log Data
 				</a>
 
@@ -47,7 +47,7 @@ export default function PrivacyPolicy() {
 					Service, and other statistics.
 				</p>
 
-				<a href="#cookies" id="cookies" className="mt-5 text-2xl font-semibold">
+				<a href="#cookies" id="cookies" className="mt-5 font-semibold text-2xl">
 					Cookies
 				</a>
 
@@ -63,7 +63,7 @@ export default function PrivacyPolicy() {
 					refuse our cookies, you may not be able to use some portions of this Service.
 				</p>
 
-				<a href="#security" id="security" className="mt-5 text-2xl font-semibold">
+				<a href="#security" id="security" className="mt-5 font-semibold text-2xl">
 					Security
 				</a>
 
@@ -73,7 +73,7 @@ export default function PrivacyPolicy() {
 					electronic storage is 100% secure and reliable, and we cannot guarantee its absolute security.
 				</p>
 
-				<a href="#links" id="links" className="mt-5 text-2xl font-semibold">
+				<a href="#links" id="links" className="mt-5 font-semibold text-2xl">
 					Links to Other Sites
 				</a>
 
@@ -84,7 +84,7 @@ export default function PrivacyPolicy() {
 					privacy policies, or practices of any third-party sites or services.
 				</p>
 
-				<a href="#children-privacy" id="children-privacy" className="mt-5 text-2xl font-semibold">
+				<a href="#children-privacy" id="children-privacy" className="mt-5 font-semibold text-2xl">
 					Children&apos;s Privacy
 				</a>
 
@@ -96,7 +96,7 @@ export default function PrivacyPolicy() {
 					able to do necessary actions.
 				</p>
 
-				<a href="#changes" id="changes" className="mt-5 text-2xl font-semibold">
+				<a href="#changes" id="changes" className="mt-5 font-semibold text-2xl">
 					Changes to This Privacy Policy
 				</a>
 
@@ -105,7 +105,7 @@ export default function PrivacyPolicy() {
 					any changes. We will notify you of any changes by posting the new Privacy Policy on this page.
 				</p>
 
-				<a href="#contact-us" id="contact-us" className="mt-5 text-2xl font-semibold">
+				<a href="#contact-us" id="contact-us" className="mt-5 font-semibold text-2xl">
 					Contact Us
 				</a>
 

src/app/(legal)/terms/page.tsx

@@ -8,10 +8,10 @@ export default function TermsAndConditions() {
 	});
 
 	return (
-		<div className="flex flex-col items-center">
-			<h1 className="text-2xl font-bold">Terms and Conditions</h1>
+		<div className="container mx-auto mt-5 flex flex-col items-center">
+			<h1 className="font-bold text-2xl">Terms and Conditions</h1>
 
-			<p className="mb-5 tracking-tighter text-white/75">Last modified: {lastModified}</p>
+			<p className="mb-5 text-white/75 tracking-tighter">Last modified: {lastModified}</p>
 
 			<main className="mb-8 flex max-w-7xl flex-col gap-5 px-4">
 				<p className="text-white/75">
@@ -28,7 +28,7 @@ export default function TermsAndConditions() {
 					it governs your use of the Website and Services.
 				</p>
 
-				<a href="#age-requirement" id="age-requirement" className="mt-5 text-2xl font-semibold">
+				<a href="#age-requirement" id="age-requirement" className="mt-5 font-semibold text-2xl">
 					Age Requirement
 				</a>
 
@@ -37,7 +37,7 @@ export default function TermsAndConditions() {
 					agreeing to this Agreement you warrant and represent that you are at least 13 years of age.
 				</p>
 
-				<a href="#other-resources" id="other-resources" className="mt-5 text-2xl font-semibold">
+				<a href="#other-resources" id="other-resources" className="mt-5 font-semibold text-2xl">
 					Links to other resources
 				</a>
 
@@ -52,7 +52,7 @@ export default function TermsAndConditions() {
 					resources is at your own risk.
 				</p>
 
-				<a href="#prohibited-uses" id="prohibited-uses" className="mt-5 text-2xl font-semibold">
+				<a href="#prohibited-uses" id="prohibited-uses" className="mt-5 font-semibold text-2xl">
 					Prohibited uses
 				</a>
 
@@ -71,7 +71,7 @@ export default function TermsAndConditions() {
 					the right to terminate your use of the Website and Services for violating any of the prohibited uses.
 				</p>
 
-				<a href="#property-rights" id="property-rights" className="mt-5 text-2xl font-semibold">
+				<a href="#property-rights" id="property-rights" className="mt-5 font-semibold text-2xl">
 					Intellectual property rights
 				</a>
 
@@ -91,7 +91,7 @@ export default function TermsAndConditions() {
 					right or license to reproduce or otherwise use any of the Operator or third party trademarks.
 				</p>
 
-				<a href="#severability" id="severability" className="mt-5 text-2xl font-semibold">
+				<a href="#severability" id="severability" className="mt-5 font-semibold text-2xl">
 					Severability
 				</a>
 
@@ -105,7 +105,7 @@ export default function TermsAndConditions() {
 					or portions thereof shall remain in full force and effect.
 				</p>
 
-				<a href="#changes-and-amendments" id="changes-and-amendments" className="mt-5 text-2xl font-semibold">
+				<a href="#changes-and-amendments" id="changes-and-amendments" className="mt-5 font-semibold text-2xl">
 					Changes and amendments
 				</a>
 
@@ -116,7 +116,7 @@ export default function TermsAndConditions() {
 					shall constitute your consent to such changes.
 				</p>
 
-				<a href="#acceptance" id="acceptance" className="mt-5 text-2xl font-semibold">
+				<a href="#acceptance" id="acceptance" className="mt-5 font-semibold text-2xl">
 					Acceptance of these terms
 				</a>
 
@@ -126,7 +126,7 @@ export default function TermsAndConditions() {
 					terms of this Agreement, you are not authorized to access or use the Website and Services.
 				</p>
 
-				<a href="#contact-us" id="contact-us" className="mt-5 text-2xl font-semibold">
+				<a href="#contact-us" id="contact-us" className="mt-5 font-semibold text-2xl">
 					Contacting us
 				</a>
 

src/app/error.tsx

@@ -7,7 +7,7 @@ export default function ErrorComponent({ error }: { readonly error: Error }) {
 
 	return (
 		<div className="mt-16 flex flex-col items-center gap-12">
-			<h1 className="text-9xl font-bold tracking-widest">500</h1>
+			<h1 className="font-bold text-9xl tracking-widest">500</h1>
 			<Text>An error occurred.</Text>
 		</div>
 	);

src/app/featured-guilds.tsx

@@ -16,17 +16,17 @@ export function FeaturedGuilds({ guilds, startDelay = 0 }: FeaturedGuildsProps)
 	]);
 
 	return (
-		<div className="overflow-hidden relative" ref={emblaRef}>
+		<div className="relative overflow-hidden" ref={emblaRef}>
 			<div className="flex">
 				{guilds.map((guild) => (
-					<div className="basis-full sm:basis-[22rem] md:basis-96 shrink-0 min-w-0 mr-4" key={`featured-${guild.id}`}>
+					<div className="mr-4 min-w-0 shrink-0 basis-full md:basis-96 sm:basis-[22rem]" key={`featured-${guild.id}`}>
 						<FeaturedGuild key={guild.id} {...guild} />
 					</div>
 				))}
 			</div>
 
-			<div className="absolute left-0 inset-y-0 right-[90%] bg-gradient-to-l from-transparent to-background" />
-			<div className="absolute right-0 inset-y-0 left-[90%] bg-gradient-to-r from-transparent to-background" />
+			<div className="absolute inset-y-0 right-[90%] left-0 bg-gradient-to-l from-transparent to-background" />
+			<div className="absolute inset-y-0 right-0 left-[90%] bg-gradient-to-r from-transparent to-background" />
 		</div>
 	);
 }
@@ -36,10 +36,10 @@ function FeaturedGuild({ id, icon, name, memberCount, partner, verified }: Featu
 	const alt = verified ? "Verified guild badge" : partner ? "Partner guild badge" : "Discoverable guild badge";
 
 	return (
-		<div className="flex items-center gap-4 md:gap-6 bg-darker px-3 py-2 border border-white/25 rounded-lg select-none">
+		<div className="flex select-none items-center gap-4 rounded-lg border border-white/25 bg-darker px-3 py-2 md:gap-6">
 			<ImageWithFallback
 				alt={`${name}'s icon`}
-				className="rounded-full size-14 md:size-16 no-drag"
+				className="no-drag size-14 rounded-full md:size-16"
 				height={64}
 				src={guildIcon(id, icon, { format: "webp", size: 64 })}
 				priority
@@ -48,13 +48,13 @@ function FeaturedGuild({ id, icon, name, memberCount, partner, verified }: Featu
 
 			<div className="flex flex-col">
 				<p
-					className="flex items-center gap-2 text-lg sm:text-xl lg:text-2xl font-bold text-ellipsis whitespace-nowrap overflow-hidden max-w-[70%] sm:max-w-[16rem] md:max-w-64"
+					className="flex max-w-[70%] items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap font-bold text-lg md:max-w-64 sm:max-w-[16rem] lg:text-2xl sm:text-xl"
 					title={name}
 				>
-					<Image src={iconSrc} alt={alt} width={20} height={20} className="size-5 rounded-full no-drag" />
+					<Image src={iconSrc} alt={alt} width={20} height={20} className="no-drag size-5 rounded-full" />
 					{name}
 				</p>
-				<p className="text-md md:text-lg text-white/50">
+				<p className="text-md text-white/50 md:text-lg">
 					{formatToNearestOrderOfMagnitude(memberCount).toLocaleString("en")} members
 				</p>
 			</div>

src/app/global-error.tsx

@@ -15,7 +15,7 @@ export default function GlobalError({ error, reset }: GlobalErrorProps) {
 				<div className="flex flex-col">
 					<div className="min-h-[calc(100vh-6.9rem)]">
 						<div className="mt-16 flex flex-col items-center gap-12">
-							<h1 className="text-9xl font-bold tracking-widest">500</h1>
+							<h1 className="font-bold text-9xl tracking-widest">500</h1>
 							<p className="text-center">
 								Whoops… An error occurred.{" "}
 								<button onClick={reset} type="button">

src/app/guilds/[guildId]/danger/01-download-leveling-data.tsx

@@ -6,7 +6,7 @@ export function DownloadLevelingData({ guildId, levelingSystemEnabled }: Downloa
 	return (
 		<a
 			className={clsx(
-				"flex w-fit items-center gap-2 rounded-lg bg-light-gray px-2 py-1 text-lg font-semibold text-shadow-regular md:text-xl",
+				"flex w-fit items-center gap-2 rounded-lg bg-light-gray px-2 py-1 font-semibold text-lg text-shadow-regular md:text-xl",
 				!levelingSystemEnabled && "pointer-events-none opacity-50",
 			)}
 			href={levelingSystemEnabled ? `/api/guilds/${guildId}/export-levels` : `/guilds/${guildId}/danger`}

src/app/guilds/[guildId]/danger/02-reset-guild-data.tsx

@@ -11,7 +11,7 @@ export function ResetGuildData({ guildId }: { readonly guildId: Snowflake }) {
 
 	return (
 		<Confirmation
-			className="flex w-fit items-center gap-2 rounded-lg bg-red px-2 py-1 text-lg font-semibold text-shadow-regular md:text-xl"
+			className="flex w-fit items-center gap-2 rounded-lg bg-red px-2 py-1 font-semibold text-lg text-shadow-regular md:text-xl"
 			onConfirm={handleResetAllConfirm}
 			buttonText="Reset All"
 		>

src/app/guilds/[guildId]/danger/page.tsx

@@ -15,7 +15,7 @@ export default async function DangerZone({ params: { guildId } }: { readonly par
 	return (
 		<div className="flex w-full flex-col gap-5 px-4 py-4">
 			<div className="space-y-2">
-				<h2 className="text-2xl font-semibold">Danger Zone</h2>
+				<h2 className="font-semibold text-2xl">Danger Zone</h2>
 				<p className="text-white/75">
 					Dangerous actions that can have irreversible consequences. Please be careful when using these options.
 				</p>
@@ -41,7 +41,7 @@ export default async function DangerZone({ params: { guildId } }: { readonly par
 						Reset all settings, leveling database, member counts, and milestones for your server…
 					</Text>
 
-					<p className="text-lg tracking-tighter text-red md:text-xl">
+					<p className="text-lg text-red tracking-tighter md:text-xl">
 						CAUTION: This action is irreversible! Please make sure you want to do this before proceeding.
 					</p>
 

src/app/guilds/[guildId]/dashboard-menu.tsx

@@ -30,18 +30,18 @@ export function DashboardMenu({ guild, guilds }: DashboardMenuProps) {
 	const currentDashSection = (pathname.split("/")[3] ?? "overview") as Section;
 
 	return (
-		<div className="flex flex-col items-center gap-6 pl-12 pr-8 md:sticky md:top-12 bg-transparent py-0">
+		<div className="flex flex-col items-center gap-6 bg-transparent py-0 pr-8 pl-12 md:sticky md:top-12">
 			<MenuButton
 				store={menu}
-				className="bg-dark-gray px-3 py-2 rounded-lg flex justify-between items-center w-full shadow-inner max-w-[16.5rem]"
+				className="flex w-full max-w-[16.5rem] items-center justify-between rounded-lg bg-dark-gray px-3 py-2 shadow-inner"
 			>
-				<div className="flex gap-2 items-center rounded-lg">
+				<div className="flex items-center gap-2 rounded-lg">
 					<ImageWithFallback
 						alt={`${guild.name}'s icon`}
 						src={guildIcon(guild.id, guild.icon)}
 						width={28}
 						height={28}
-						className="rounded-lg size-7"
+						className="size-7 rounded-lg"
 						fallback={fallbackAvatarImg}
 						unoptimized={Boolean(guild.icon)}
 					/>
@@ -56,12 +56,12 @@ export function DashboardMenu({ guild, guilds }: DashboardMenuProps) {
 				store={menu}
 				gutter={8}
 				sameWidth
-				className="max-h-96 z-50 rounded-lg bg-dark-gray flex flex-col overflow-y-auto"
+				className="z-50 flex max-h-96 flex-col overflow-y-auto rounded-lg bg-dark-gray"
 			>
 				{guilds.map((guild) => (
 					<MenuItem key={guild.id} store={menu}>
 						<Link
-							className="flex gap-2 items-center py-2 px-1.5 cursor-pointer hover:bg-white/10"
+							className="flex cursor-pointer items-center gap-2 px-1.5 py-2 hover:bg-white/10"
 							href={`/guilds/${guild.id}`}
 							prefetch={guilds.length < 3}
 						>
@@ -83,17 +83,17 @@ export function DashboardMenu({ guild, guilds }: DashboardMenuProps) {
 
 			<div>
 				<Link
-					className="relative flex w-fit rounded-lg px-3 py-2 before:absolute before:inset-1 before:rounded-lg before:bg-patreon before:blur-lg after:absolute after:inset-0 after:z-10 after:rounded-lg after:bg-patreon"
+					className="relative flex w-fit rounded-lg px-3 py-2 after:absolute before:absolute after:inset-0 before:inset-1 after:z-10 after:rounded-lg before:rounded-lg after:bg-patreon before:bg-patreon before:blur-lg"
 					href="/premium"
 				>
-					<span className="z-20 flex items-center justify-center gap-3 text-xl font-extrabold text-black">
+					<span className="z-20 flex items-center justify-center gap-3 font-extrabold text-black text-xl">
 						<Patreon className="size-6" />
 						{guild.premium ? "Perks Active" : "Get Premium"}
 					</span>
 				</Link>
 
 				<aside className="mt-6 mb-2">
-					<ul className="flex flex-col whitespace-nowrap gap-1">
+					<ul className="flex flex-col gap-1 whitespace-nowrap">
 						<Item guildId={guild.id} name="Overview" path="" isActive={currentDashSection === "overview"}>
 							<Settings className="size-5" />
 						</Item>
@@ -102,35 +102,35 @@ export function DashboardMenu({ guild, guilds }: DashboardMenuProps) {
 							<TbRobot className="size-5" />
 						</Item> */}
 						<Item guildId={guild.id} name="Leveling" path="leveling" isActive={currentDashSection === "leveling"}>
-							<TrendingUp className="text-[#ff7077] size-5" />
+							<TrendingUp className="size-5 text-[#ff7077]" />
 						</Item>
 						<Item
 							guildId={guild.id}
 							name="Multipliers"
 							path="multipliers"
 							isActive={currentDashSection === "multipliers"}
 						>
-							<RocketLaunch className="text-[#82cbff] size-5" />
+							<RocketLaunch className="size-5 text-[#82cbff]" />
 						</Item>
 						<Item guildId={guild.id} name="Role Management" path="roles" isActive={currentDashSection === "roles"}>
-							<FormatListBulleted className="text-[#d2ffae] size-5" />
+							<FormatListBulleted className="size-5 text-[#d2ffae]" />
 						</Item>
 						<Item guildId={guild.id} name="Milestones" path="milestones" isActive={currentDashSection === "milestones"}>
-							<Signpost className="text-[#804994] size-5" />
+							<Signpost className="size-5 text-[#804994]" />
 						</Item>
 						<Item guildId={guild.id} name="Emoji List" path="emojis" isActive={currentDashSection === "emojis"}>
-							<EmojiEmotions className="text-[#ffe87c] size-5" />
+							<EmojiEmotions className="size-5 text-[#ffe87c]" />
 						</Item>
 						<Item
 							guildId={guild.id}
 							name="Miscellaneous"
 							path="miscellaneous"
 							isActive={currentDashSection === "miscellaneous"}
 						>
-							<MiscellaneousServices className="text-[#73ffc4] size-5" />
+							<MiscellaneousServices className="size-5 text-[#73ffc4]" />
 						</Item>
 						<Item guildId={guild.id} name="Danger Zone" path="danger" isActive={currentDashSection === "danger"}>
-							<Warning className="text-[#ff9254] size-5" />
+							<Warning className="size-5 text-[#ff9254]" />
 						</Item>
 					</ul>
 				</aside>
@@ -144,7 +144,7 @@ function Item({ guildId, name, path, isActive, children }: ItemProps) {
 		<li>
 			<Link
 				className={clsx(
-					"flex items-center gap-7 rounded-xl py-2 pl-3 pr-5 transition-colors hover:bg-white/10",
+					"flex items-center gap-7 rounded-xl py-2 pr-5 pl-3 transition-colors hover:bg-white/10",
 					isActive && "bg-white/10",
 				)}
 				href={`/guilds/${guildId}/${path}`}