Point Prettier to our Tailwind config

Author: hasparus

.prettierrc

@@ -0,0 +1,32 @@
+import { dirname, resolve } from "path"
+import { fileURLToPath } from "url"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+
+/**
+ * @type {import("prettier").Config}
+ */
+export default {
+  arrowParens: "avoid",
+  semi: false,
+  singleQuote: false,
+  useTabs: false,
+  tabWidth: 2,
+  overrides: [
+    {
+      files: "*.svg",
+      options: { parser: "html" },
+    },
+    {
+      files: "*.mdx",
+      options: {
+        proseWrap: "always",
+        semi: false,
+        trailingComma: "none",
+      },
+    },
+  ],
+  plugins: ["prettier-plugin-pkg", "prettier-plugin-tailwindcss"],
+  // We need this to ensure classes format the same across CI and editors.
+  tailwindConfig: resolve(__dirname, "./tailwind.config.ts"),
+}

prettier.config.mjs

@@ -133,7 +133,7 @@ export function BlogCardPicture({
       <canvas
         ref={canvasRef}
         aria-hidden="true"
-        className="data-[visible]:animate-fade-in pointer-events-none absolute inset-0 !size-full"
+        className="pointer-events-none absolute inset-0 !size-full data-[visible]:animate-fade-in"
       />
       {children ? <div className="relative z-10 p-4">{children}</div> : null}
     </div>