enable prettier-plugin-tailwindcss

JohanLi · Jan 20, 2024 · 02f49c0 · 02f49c0
1 parent 7bd15d6
commit 02f49c0
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 11 deletions.
diff --git a/app/Header.tsx b/app/Header.tsx
@@ -10,12 +10,12 @@ export default function Header() {
   return (
     <Link href="/">
       {isHomePage && (
-        <h1 className="text-4xl font-extrabold tracking-tight md:text-5xl text-[#a675a2]">
+        <h1 className="text-4xl font-extrabold tracking-tight text-[#a675a2] md:text-5xl">
           Johan Li
         </h1>
       )}
       {!isHomePage && (
-        <h2 className="text-2xl font-extrabold tracking-tight md:text-3xl text-[#a675a2]">
+        <h2 className="text-2xl font-extrabold tracking-tight text-[#a675a2] md:text-3xl">
           Johan Li
         </h2>
       )}

diff --git a/app/components/article/Article.tsx b/app/components/article/Article.tsx
@@ -18,7 +18,7 @@ export function Article(props: Props) {
   return (
     <article className="mx-auto w-full max-w-7xl justify-between px-4 lg:flex lg:px-8">
       <div className="max-w-2xl xl:max-w-3xl">
-        <div className="pt-12 pb-6">
+        <div className="pb-6 pt-12">
           <H1>{props.title}</H1>
           <p className="mt-3 text-sm text-gray-400">
             {unixTimestampToMonthYear(props.published)} · {props.readingTime}{' '}

diff --git a/app/components/article/Common.tsx b/app/components/article/Common.tsx
@@ -34,7 +34,7 @@ export function H2({ children }: PropsString) {
 
 export function H3({ children }: PropsString) {
   return (
-    <h3 className="mt-12 mb-6 text-base font-bold md:text-lg">{children}</h3>
+    <h3 className="mb-6 mt-12 text-base font-bold md:text-lg">{children}</h3>
   )
 }
 

diff --git a/app/components/article/InPageNavigation.tsx b/app/components/article/InPageNavigation.tsx
@@ -113,7 +113,7 @@ export default function InPageNavigation({ title, headings }: Props) {
 
   return (
     <div className="hidden pl-12 pt-12 lg:block lg:pl-24">
-      <nav className="sticky top-12 left-0 border-l-2 border-gray-200 pl-4">
+      <nav className="sticky left-0 top-12 border-l-2 border-gray-200 pl-4">
         <Link
           href={`/${getSlug(title)}`}
           className={classNames(
@@ -125,7 +125,7 @@ export default function InPageNavigation({ title, headings }: Props) {
         >
           {title}
         </Link>
-        <ul className="mt-2 ml-2 space-y-2">
+        <ul className="ml-2 mt-2 space-y-2">
           {headings.map((heading, i) => (
             <li key={heading}>
               <Link
@@ -144,7 +144,7 @@ export default function InPageNavigation({ title, headings }: Props) {
         </ul>
         <div
           className={classNames(
-            'absolute top-0 -left-0.5 h-px w-0.5 origin-top bg-purple-800 transition-transform duration-300',
+            'absolute -left-0.5 top-0 h-px w-0.5 origin-top bg-purple-800 transition-transform duration-300',
           )}
           style={{
             transform: `translateY(${thumb.y}px) scaleY(${thumb.height})`,

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -26,7 +26,7 @@ if (!CLOUDFLARE_WEB_ANALYTICS_TOKEN) {
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={robotoFlex.className}>
-      <body className="overflow-y-scroll flex min-h-screen flex-col">
+      <body className="flex min-h-screen flex-col overflow-y-scroll">
         <nav className="pt-12">
           <div className="mx-auto max-w-7xl px-4 lg:px-8">
             <Header />

diff --git a/app/page.tsx b/app/page.tsx
@@ -8,7 +8,7 @@ export default async function Home() {
 
   return (
     <div className="mx-auto max-w-7xl px-4 lg:px-8">
-      <div className="pt-6 pb-12 sm:pt-12 sm:pb-24">
+      <div className="pb-12 pt-6 sm:pb-24 sm:pt-12">
         <h2 className="text-2xl font-extrabold tracking-tight text-gray-900 md:text-3xl">
           Articles
         </h2>

diff --git a/package.json b/package.json
@@ -8,8 +8,8 @@
     "start": "next dev",
     "tsc": "tsc --noEmit",
     "test": "jest",
-    "lint": "eslint app/ src/ tests/ --ext .ts --ext .tsx",
-    "prettier": "prettier --write app/ src/ tests/",
+    "lint": "eslint app/ tests/ --ext .ts --ext .tsx",
+    "prettier": "prettier --write app/ tests/",
     "prebuild": "next telemetry disable",
     "build": "next build",
     "start:prod": "node .next/standalone/server.js",

diff --git a/prettier.config.js b/prettier.config.js
@@ -2,4 +2,5 @@ module.exports = {
   singleQuote: true,
   trailingComma: 'all',
   semi: false,
+  plugins: ['prettier-plugin-tailwindcss'],
 };