chore: classname order

.eslintrc.yml

@@ -25,16 +25,16 @@ rules:
   react/jsx-filename-extension: [2, { 'extensions': ['.jsx', '.tsx'] }]
   react/require-default-props: 'off'
   '@typescript-eslint/explicit-function-return-type': 'off'
-  '@typescript-eslint/no-floating-promises': 'off'
   unicorn/filename-case: ['error', { 'case': 'kebabCase' }]
   'require-await': 'error'
 settings:
-  'import/resolver':
+  import/resolver:
     alias:
       map:
-        [
-          ['~/components', './src/components'],
-          ['~/pages', './src/pages'],
-          ['~/services', './src/services'],
-        ]
+        - - '~/components'
+          - './src/components'
+        - - '~/pages'
+          - './src/pages'
+        - - '~/services'
+          - './src/services'
       extensions: ['.ts', '.js', '.jsx', '.ts', '.tsx', '.json']

.prettierrc.yml

@@ -1 +1,3 @@
 singleQuote: true
+plugins:
+  - prettier-plugin-tailwindcss

package.json

@@ -68,7 +68,8 @@
     "msw": "^1.3.3",
     "postcss": "^8.4.31",
     "postcss-nesting": "12.0.1",
-    "prettier": "3.2.5",
+    "prettier": "3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.6",
     "standard-version": "^9.5.0",
     "storybook": "^8.0.10",
     "storybook-addon-react-router-v6": "~2.0.15",

src/components/Header.tsx

@@ -1,4 +1,4 @@
 import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { themeChange } from 'theme-change';
 
@@ -9,16 +9,16 @@
   }, []);
 
   return (
-    <nav className="navbar bg-neutral text-neutral-content mb-3">
+    <nav className="navbar mb-3 bg-neutral text-neutral-content">
       <div className="flex-1">
-        <Link to="/" className="btn btn-ghost normal-case text-xl">
+        <Link to="/" className="btn-ghost btn text-xl normal-case">
           Microblogging
         </Link>
       </div>
       <div className="flex-none justify-between">
         <button
           type="button"
-          className="btn btn-circle mr-6"
+          className="btn-circle btn mr-6"
           data-toggle-theme="forest,winter"
           data-act-class="ACTIVECLASS"
           aria-label="Dark Theme"
@@ -29,7 +29,7 @@
             viewBox="0 0 24 24"
             strokeWidth={1.5}
             stroke="currentColor"
-            className="w-6 h-6"
+            className="h-6 w-6"
           >
             <path
               strokeLinecap="round"
@@ -39,7 +39,7 @@
           </svg>
         </button>
         <form className="form-inline navbar-end">
-          <Link to="/posts/new" className="btn btn-outline btn-primary">
+          <Link to="/posts/new" className="btn-primary btn-outline btn">
             New Post
           </Link>
         </form>

src/components/Search.tsx

@@ -1,15 +1,15 @@
 function Search() {
   return (
     <div className="col-span-12 w-full pb-6">
       <input
         disabled
         type="search"
-        className="disabled:bg-gray-100 rounded-l border border-blue-700 py-1 px-5"
+        className="rounded-l border border-blue-700 px-5 py-1 disabled:bg-gray-100"
       />
       <button
         disabled
         type="button"
-        className=" text-white fill rounded-r border bg-blue-700 border-blue-700 px-5 py-1"
+        className="fill rounded-r border border-blue-700 bg-blue-700 px-5 py-1 text-white"
       >
         Search
       </button>

src/components/header.tsx

@@ -9,16 +9,16 @@ function Header() {
   }, []);
 
   return (
-    <nav className="navbar bg-neutral text-neutral-content mb-3">
+    <nav className="navbar mb-3 bg-neutral text-neutral-content">
       <div className="flex-1">
-        <Link to="/" className="btn btn-ghost normal-case text-xl">
+        <Link to="/" className="btn-ghost btn text-xl normal-case">
           Microblogging
         </Link>
       </div>
       <div className="flex-none justify-between">
         <button
           type="button"
-          className="btn btn-circle mr-6"
+          className="btn-circle btn mr-6"
           data-toggle-theme="forest,winter"
           data-act-class="ACTIVECLASS"
           aria-label="Dark Theme"
@@ -29,7 +29,7 @@ function Header() {
             viewBox="0 0 24 24"
             strokeWidth={1.5}
             stroke="currentColor"
-            className="w-6 h-6"
+            className="h-6 w-6"
           >
             <path
               strokeLinecap="round"
@@ -39,7 +39,7 @@ function Header() {
           </svg>
         </button>
         <form className="form-inline navbar-end">
-          <Link to="/posts/new" className="btn btn-outline btn-primary">
+          <Link to="/posts/new" className="btn-primary btn-outline btn">
             New Post
           </Link>
         </form>

src/components/post-preview.tsx

@@ -26,7 +26,7 @@ function Author({ userId }: IAuthor) {
 
   return userId ? (
     <div>
-      <Link to={`/users/${username}`} className="link link-neutral">
+      <Link to={`/users/${username}`} className="link-neutral link">
         {name}
       </Link>{' '}
       <span className="text-muted">{`@${username}`}</span>
@@ -87,7 +87,7 @@ function BlogPost({
   const [isLiked, setIsLiked] = useState(false);
 
   return (
-    <article className="card border border-gray-400 rounded-md mb-3">
+    <article className="card mb-3 rounded-md border border-gray-400">
       {img && (
         <figure>
           <img
@@ -100,15 +100,15 @@ function BlogPost({
         </figure>
       )}
       <div className="card-body pb-0">
-        <div className="bg-transparent border-0 flex justify-between mb-3">
+        <div className="mb-3 flex justify-between border-0 bg-transparent">
           <Author userId={userId} />
           <p className="card-text text-right">
             <time dateTime={htmlDatetime} className="text-muted">
               {date}
             </time>
           </p>
         </div>
-        <h3 className="card-title link link-primary mb-2 text-3xl">
+        <h3 className="link-primary link card-title mb-2 text-3xl">
           <Link to={`/posts/${id}`} className="">
             {heading}
           </Link>
@@ -118,7 +118,7 @@ function BlogPost({
       <div className="grid grid-cols-12 p-3 pb-1">
         <div className="col-span-6">
           <button
-            className="btn btn-circle btn-ghost"
+            className="btn-ghost btn-circle btn"
             title="Like it!"
             type="button"
             onClick={(e) => {
@@ -158,7 +158,7 @@ function BlogPost({
           <div className="btn-group-horizontal" role="group">
             <Link
               to={`/posts/${id}/edit`}
-              className="btn btn-ghost btn-circle"
+              className="btn-ghost btn-circle btn"
               title="Edit post"
             >
               <svg
@@ -174,7 +174,7 @@ function BlogPost({
               </svg>
             </Link>
             <button
-              className="btn btn-ghost btn-circle"
+              className="btn-ghost btn-circle btn"
               title="Remove post"
               type="button"
               onClick={() => {

src/components/search.tsx

@@ -4,12 +4,12 @@ function Search() {
       <input
         disabled
         type="search"
-        className="disabled:bg-gray-100 rounded-l border border-blue-700 py-1 px-5"
+        className="rounded-l border border-blue-700 px-5 py-1 disabled:bg-gray-100"
       />
       <button
         disabled
         type="button"
-        className=" text-white fill rounded-r border bg-blue-700 border-blue-700 px-5 py-1"
+        className="fill rounded-r border border-blue-700 bg-blue-700 px-5 py-1 text-white"
       >
         Search
       </button>

src/pages/[all].tsx

@@ -5,7 +5,7 @@ function NoMatch() {
 
   return (
     <div className="container mx-auto px-4">
-      <h1 className="text-center mt-3">404</h1>
+      <h1 className="mt-3 text-center">404</h1>
       <p>
         No match for <code>{location.pathname}</code>
       </p>