diff --git a/.eslintrc.yml b/.eslintrc.yml
index 32106c9..d13f9e9 100644
--- a/.eslintrc.yml
+++ b/.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']
diff --git a/.prettierrc.yml b/.prettierrc.yml
index 0176969..d215ee6 100644
--- a/.prettierrc.yml
+++ b/.prettierrc.yml
@@ -1 +1,3 @@
 singleQuote: true
+plugins:
+  - prettier-plugin-tailwindcss
diff --git a/package.json b/package.json
index 8015479..7cc00e5 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b32577..5a025a2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -154,8 +154,11 @@ importers:
         specifier: 12.0.1
         version: 12.0.1(postcss@8.4.31)
       prettier:
-        specifier: 3.2.5
-        version: 3.2.5
+        specifier: 3.3.3
+        version: 3.3.3
+      prettier-plugin-tailwindcss:
+        specifier: ^0.6.6
+        version: 0.6.6(prettier@3.3.3)
       standard-version:
         specifier: ^9.5.0
         version: 9.5.0
@@ -6433,13 +6436,68 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
+  prettier-plugin-tailwindcss@0.6.6:
+    resolution: {integrity: sha512-OPva5S7WAsPLEsOuOWXATi13QrCKACCiIonFgIR6V4lYv4QLp++UXVhZSzRbZxXGimkQtQT86CC6fQqTOybGng==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig-melody': '*'
+      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-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig-melody':
+        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@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
     hasBin: true
 
-  prettier@3.2.5:
-    resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==}
+  prettier@3.3.3:
+    resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -7323,8 +7381,8 @@ packages:
   tslib@2.6.2:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
 
-  tslib@2.6.3:
-    resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
+  tslib@2.7.0:
+    resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
 
   tsutils@3.21.0:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
@@ -10365,7 +10423,7 @@ snapshots:
       jscodeshift: 0.15.2(@babel/preset-env@7.24.5(@babel/core@7.24.5))
       leven: 3.1.0
       ora: 5.4.1
-      prettier: 3.2.5
+      prettier: 3.3.3
       prompts: 2.4.2
       read-pkg-up: 7.0.1
       semver: 7.6.0
@@ -10408,7 +10466,7 @@ snapshots:
       globby: 11.1.0
       jscodeshift: 0.15.2(@babel/preset-env@7.24.5(@babel/core@7.24.5))
       lodash: 4.17.21
-      prettier: 3.2.5
+      prettier: 3.3.3
       recast: 0.23.6
       tiny-invariant: 1.3.3
     transitivePeerDependencies:
@@ -14191,7 +14249,7 @@ snapshots:
     dependencies:
       copy-anything: 2.0.6
       parse-node-version: 1.0.1
-      tslib: 2.6.3
+      tslib: 2.7.0
     optionalDependencies:
       errno: 0.1.8
       graceful-fs: 4.2.11
@@ -15386,9 +15444,13 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-tailwindcss@0.6.6(prettier@3.3.3):
+    dependencies:
+      prettier: 3.3.3
+
   prettier@2.8.8: {}
 
-  prettier@3.2.5: {}
+  prettier@3.3.3: {}
 
   pretty-bytes@5.6.0: {}
 
@@ -16412,7 +16474,7 @@ snapshots:
 
   tslib@2.6.2: {}
 
-  tslib@2.6.3: {}
+  tslib@2.7.0: {}
 
   tsutils@3.21.0(typescript@5.2.2):
     dependencies:
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 8b782a3..8b7bf91 100644
--- a/src/components/Header.tsx
+++ b/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>
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index cc5d5f1..aa0f637 100644
--- a/src/components/Search.tsx
+++ b/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>
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 8b782a3..8b7bf91 100644
--- a/src/components/header.tsx
+++ b/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>
diff --git a/src/components/post-preview.tsx b/src/components/post-preview.tsx
index 7b4e9bf..452b953 100644
--- a/src/components/post-preview.tsx
+++ b/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,7 +100,7 @@ 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">
@@ -108,7 +108,7 @@ function BlogPost({
             </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={() => {
diff --git a/src/components/search.tsx b/src/components/search.tsx
index cc5d5f1..aa0f637 100644
--- a/src/components/search.tsx
+++ b/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>
diff --git a/src/pages/[all].tsx b/src/pages/[all].tsx
index 28220d9..478ad96 100644
--- a/src/pages/[all].tsx
+++ b/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>
diff --git a/src/pages/posts/[postId]/edit.tsx b/src/pages/posts/[postId]/edit.tsx
index 76e0968..512c1e6 100644
--- a/src/pages/posts/[postId]/edit.tsx
+++ b/src/pages/posts/[postId]/edit.tsx
@@ -68,10 +68,10 @@ export function EditPost({ post }: IBlogPostProps) {
 
   return (
     <div className="container mx-auto px-4">
-      <div className="grid grid-cols-12 gap-1 mb-3">
+      <div className="mb-3 grid grid-cols-12 gap-1">
         {status && <h3>{status}</h3>}
         <div className="col-span-12 md:col-span-8 lg:col-span-6">
-          <h3 className="text-2xl mt-3 mb-5">Any updates?</h3>
+          <h3 className="mb-5 mt-3 text-2xl">Any updates?</h3>
           {img && (
             <figure>
               <img
@@ -107,7 +107,7 @@ export function EditPost({ post }: IBlogPostProps) {
               <textarea
                 placeholder="Hashtags"
                 rows={2}
-                className="textarea text-lg w-full"
+                className="textarea w-full text-lg"
                 value={hashtags}
                 onChange={(e) => {
                   setHashtags(e.target.value);
@@ -125,12 +125,7 @@ export function EditPost({ post }: IBlogPostProps) {
                 id="uploadImageInput"
                 type="file"
                 title="Add image"
-                className="block w-full text-sm text-slate-500
-                file:mr-4 file:py-2 file:px-4
-                file:rounded-full file:border-0
-                file:text-sm file:font-semibold
-                file:bg-violet-50 file:text-slate-500
-                hover:file:bg-violet-100 cursor-pointer mt-2"
+                className="mt-2 block w-full cursor-pointer text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-500 hover:file:bg-violet-100"
                 onChange={handleImageChange}
               />
             </div>
@@ -139,7 +134,7 @@ export function EditPost({ post }: IBlogPostProps) {
               <input
                 title="Update post"
                 type="submit"
-                className="btn btn-primary btn-outline mt-5"
+                className="btn-primary btn-outline btn mt-5"
                 value="Update it"
               />
             </div>
diff --git a/src/pages/posts/[postId]/index.tsx b/src/pages/posts/[postId]/index.tsx
index 83b748a..aec32ba 100644
--- a/src/pages/posts/[postId]/index.tsx
+++ b/src/pages/posts/[postId]/index.tsx
@@ -15,11 +15,11 @@ function Post({ heading, text }: IBlogPost) {
     <main className="container mx-auto px-4">
       <div className="grid grid-cols-12 gap-1">
         <article className="col-span-12 md:col-span-8 lg:col-span-6">
-          <h1 className="text-4xl mt-2 mb-6">{heading}</h1>
+          <h1 className="mb-6 mt-2 text-4xl">{heading}</h1>
           <p className="text-lg">{text}</p>
           <button
             type="button"
-            className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded my-5"
+            className="my-5 rounded border border-blue-500 bg-transparent px-4 py-2 font-semibold text-blue-700 hover:border-transparent hover:bg-blue-500 hover:text-white"
             onClick={handleNavigate}
           >
             Go to home
diff --git a/src/pages/posts/new.tsx b/src/pages/posts/new.tsx
index 7a42e0b..adf1314 100644
--- a/src/pages/posts/new.tsx
+++ b/src/pages/posts/new.tsx
@@ -68,7 +68,7 @@ function AddPost() {
 
   return (
     <div className="container mx-auto px-4">
-      <div className="grid grid-cols-12 gap-1 mb-3">
+      <div className="mb-3 grid grid-cols-12 gap-1">
         {status && <h3>{status}</h3>}
         {image && (
           <div className="col-span-12 md:col-span-10 lg:col-span-6">
@@ -81,7 +81,7 @@ function AddPost() {
           </div>
         )}
         <div className="col-span-12 md:col-span-8 lg:col-span-6">
-          <h3 className="text-2xl mt-3 mb-5">What&apos;s new?</h3>
+          <h3 className="mb-5 mt-3 text-2xl">What&apos;s new?</h3>
           <form onSubmit={createStory}>
             <div className="mb-3">
               <Input
@@ -96,7 +96,7 @@ function AddPost() {
               <textarea
                 placeholder="Write your text..."
                 rows={5}
-                className="textarea text-lg w-full"
+                className="textarea w-full text-lg"
                 value={text}
                 onChange={(e) => {
                   setText(e.target.value);
@@ -107,7 +107,7 @@ function AddPost() {
               <textarea
                 placeholder="Hashtags"
                 rows={2}
-                className="textarea text-lg w-full"
+                className="textarea w-full text-lg"
                 value={hashtags}
                 onChange={(e) => {
                   setHashtags(e.target.value);
@@ -125,12 +125,7 @@ function AddPost() {
                 id="uploadImageInput"
                 type="file"
                 title="Add image"
-                className="block w-full text-sm text-slate-500
-                file:mr-4 file:py-2 file:px-4
-                file:rounded-full file:border-0
-                file:text-sm file:font-semibold
-                file:bg-violet-50 file:text-slate-500
-                hover:file:bg-violet-100 cursor-pointer mt-2"
+                className="mt-2 block w-full cursor-pointer text-sm text-slate-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-slate-500 hover:file:bg-violet-100"
                 onChange={handleImageChange}
               />
             </div>
@@ -138,7 +133,7 @@ function AddPost() {
               <button
                 title="Add new post"
                 type="submit"
-                className="btn btn-primary btn-outline mt-5"
+                className="btn-primary btn-outline btn mt-5"
               >
                 <i className="glyphicon glyphicon-ok" />
                 Post it
diff --git a/src/pages/users/[user-name].tsx b/src/pages/users/[user-name].tsx
index 2984ddf..7fa153e 100644
--- a/src/pages/users/[user-name].tsx
+++ b/src/pages/users/[user-name].tsx
@@ -9,7 +9,7 @@ function Info({ name }: IUser) {
     <main className="container mx-auto px-4">
       <div className="grid grid-cols-12 gap-1">
         <article className="col-span-12 md:col-span-8 lg:col-span-6">
-          <h1 className="text-4xl mt-2 mb-6">{name}</h1>
+          <h1 className="mb-6 mt-2 text-4xl">{name}</h1>
         </article>
       </div>
     </main>