Add prettier-plugin-tailwindcss, run prettier on whole codebase

.prettierrc

@@ -3,5 +3,6 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 120,
-  "useTabs": false
+  "useTabs": false,
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

README.md

@@ -3,15 +3,17 @@
 ![mesh-gradient-shader](https://github.com/user-attachments/assets/2db6e087-764c-4c36-bee7-451b09c4c91e)
 
 ### Getting started
+
 ```
 // React
 npm i @paper-design/shaders-react
 
 // vanilla
-npm i @paper-design/shaders 
+npm i @paper-design/shaders
 ```
 
 ### React example
+
 ```jsx
 import { MeshGradient } from '@paper-design/shaders-react';
 
@@ -21,7 +23,8 @@ import { MeshGradient } from '@paper-design/shaders-react';
   color3="#0000FF" // blue
   color4="#800080" // purple
   speed={0.25}
-  style={{ width: 500, height: 200 }} />
+  style={{ width: 500, height: 200 }}
+/>;
 
 // these settings can be configured in code or designed in Paper
 ```
@@ -63,7 +66,8 @@ import { MeshGradient } from '@paper-design/shaders-react';
   color3="#0000FF" // blue
   color4="#800080" // purple
   speed={0.25}
-  style={{ width: 500, height: 200 }} />
+  style={{ width: 500, height: 200 }}
+/>;
 
 // these settings can be configured in code or designed in Paper
 ```
@@ -81,7 +85,7 @@ const shaderParams = {
   u_color3: 'blue',
   u_color4: 'purple',
   u_speed: 0.25,
-}
+};
 
 const meshGradient = new ShaderMount(myCanvas, meshGradientFragmentShader, shaderParams);
 ```

docs/src/app/page.tsx

@@ -7,30 +7,30 @@ import logoImg from '../../public/logo-placeholder.webp';
 export default function Home() {
   return (
     <>
-      <header className="bg-[#f7f6f0] pt-5 pb-24 sm:pb-32">
+      <header className="bg-[#f7f6f0] pb-24 pt-5 sm:pb-32">
         <div className="container mx-auto max-w-screen-lg px-4">
-          <div className="flex justify-between mb-8 items-center">
+          <div className="mb-8 flex items-center justify-between">
             <Link
-              className="flex items-center gap-1 font-semibold font-[matter] text-2xl"
+              className="flex items-center gap-1 font-[matter] text-2xl font-semibold"
               href="https://paper.design/"
               target="_blank"
             >
-              <Image src={logoImg} alt="Paper" width={32} height={32} className="opacity-80 relative top-[1px]" />
+              <Image src={logoImg} alt="Paper" width={32} height={32} className="relative top-[1px] opacity-80" />
               Paper
             </Link>
             <Link href="https://github.com/paper-design/shaders" target="_blank">
               <GithubIcon className="size-7" />
             </Link>
           </div>
-          <div className="flex flex-col gap-2 text-center max-w-64 mx-auto">
-            <h1 className="text-4xl font-bold font-[matter]">Paper Shaders</h1>
+          <div className="mx-auto flex max-w-64 flex-col gap-2 text-center">
+            <h1 className="font-[matter] text-4xl font-bold">Paper Shaders</h1>
             <p className="text-lg text-gray-600">ultra fast zero-dependency shaders for your designs</p>
           </div>
         </div>
       </header>
       <main className="-mt-12 pb-16">
         <div className="container mx-auto max-w-screen-lg px-4">
-          <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-16 gap-x-16 gap-y-8 md:gap-y-16">
+          <div className="grid gap-16 gap-x-16 gap-y-8 sm:grid-cols-2 md:grid-cols-3 md:gap-y-16">
             <ShaderItems />
           </div>
         </div>

docs/src/components/back-button.tsx

@@ -3,7 +3,7 @@ import { BackIcon } from '@/icons';
 export function BackButton({ className = '' }: { className?: string }) {
   return (
     <button
-      className={` ${className} fixed top-3 left-3 aspect-square rounded-full bg-white/80 hover:bg-white z-10 p-2 shadow transition-all duration-300`}
+      className={` ${className} fixed left-3 top-3 z-10 aspect-square rounded-full bg-white/80 p-2 shadow transition-all duration-300 hover:bg-white`}
     >
       <BackIcon className="size-6" />
     </button>

docs/src/components/shader-item.tsx

@@ -31,7 +31,7 @@ export function ShaderItem({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div className="relative h-32 rounded-full overflow-hidden shadow">
+      <div className="relative h-32 overflow-hidden rounded-full shadow">
         <Image
           className="size-full object-cover"
           src={image}

docs/tailwind.config.ts

@@ -1,16 +1,16 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 export default {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       colors: {
-        background: "var(--background)",
-        foreground: "var(--foreground)",
+        background: 'var(--background)',
+        foreground: 'var(--foreground)',
       },
     },
   },

package.json

@@ -22,6 +22,8 @@
     "esbuild": "^0.24.0",
     "nodemon": "^3.1.7",
     "npm-run-all": "^4.1.5",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.9",
     "rimraf": "^6.0.1",
     "typescript": "^5.6.3"
   },

packages/shaders-react/tsconfig.json

@@ -23,5 +23,5 @@
     "noUnusedParameters": false,
     "noUncheckedIndexedAccess": true
   },
-  "include": ["src/**/*"],
+  "include": ["src/**/*"]
 }

packages/shaders/src/shaders/metaballs.ts

@@ -1,10 +1,10 @@
 export type MetaballsUniforms = {
-    u_color1: [number, number, number, number];
-    u_color2: [number, number, number, number];
-    u_color3: [number, number, number, number];
-    u_scale: number;
-    u_dotSize: number;
-    u_visibilityRange: number;
+  u_color1: [number, number, number, number];
+  u_color2: [number, number, number, number];
+  u_color3: [number, number, number, number];
+  u_scale: number;
+  u_dotSize: number;
+  u_visibilityRange: number;
 };
 
 /**
@@ -111,4 +111,4 @@ void main() {
 
     fragColor = vec4(color, opacity);
 }
-`;
+`;

publish.js

@@ -22,9 +22,7 @@ if (tag) {
 const packageVersionMap = {};
 // Loop through all the packages and get the current version of each
 for (const pkg of packages) {
-  const packageJson = JSON.parse(
-    readFileSync(`packages/${pkg}/package.json`, 'utf8')
-  );
+  const packageJson = JSON.parse(readFileSync(`packages/${pkg}/package.json`, 'utf8'));
   // Get the name of the package
   const name = packageJson.name;
   const currentVersion = packageJson.version;
@@ -36,10 +34,7 @@ async function publish(pkg) {
   console.log(`Publishing ${pkg}...`);
 
   //  ----- Update any workspace dependencies with the current version ----- //
-  const originalPackageJson = readFileSync(
-    `${packagePath}/package.json`,
-    'utf8'
-  );
+  const originalPackageJson = readFileSync(`${packagePath}/package.json`, 'utf8');
   const packageJson = JSON.parse(originalPackageJson);
   // Search the package.json for any packages in our packageVersionMap and replace the version with the current version
   for (const [key, value] of Object.entries(packageJson.dependencies)) {
@@ -48,10 +43,7 @@ async function publish(pkg) {
     }
   }
   // Write the updated package.json
-  writeFileSync(
-    `${packagePath}/package.json`,
-    JSON.stringify(packageJson, null, 2)
-  );
+  writeFileSync(`${packagePath}/package.json`, JSON.stringify(packageJson, null, 2));
 
   // ----- Publish the package ----- //
   const args = ['publish', '--access', 'public'];
@@ -70,9 +62,7 @@ async function publish(pkg) {
 
     child.on('close', (code) => {
       if (code !== 0) {
-        console.log(
-          `Skipping ${pkg}: Publication failed or package is already up to date`
-        );
+        console.log(`Skipping ${pkg}: Publication failed or package is already up to date`);
       } else {
         console.log(`Published ${pkg}`);
       }