tooling: prettier for astro and tailwind (kamranahmedse#3732)

* tooling: prettier for astro and tailwind

Prettier configuration for Astro component's formatting and Tailwind CSS class sorting.

* fix: single quote for props

.prettierrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  semi: true,
+  singleQuote: true,
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+        singleQuote: true,
+        jsxSingleQuote: true,
+      },
+    },
+  ],
+  plugins: [
+    require.resolve('prettier-plugin-astro'),
+    require('prettier-plugin-tailwindcss'),
+  ],
+};

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "prettier.documentSelectors": ["**/*.astro"],
+  "[astro]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

package.json

@@ -37,6 +37,7 @@
     "markdown-it": "^13.0.1",
     "openai": "^3.2.1",
     "prettier": "^2.8.7",
-    "prettier-plugin-astro": "^0.8.0"
+    "prettier-plugin-astro": "^0.8.0",
+    "prettier-plugin-tailwindcss": "^0.2.6"
   }
 }

src/pages/roadmaps.astro

@@ -19,9 +19,9 @@ const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
     showYouTubeAlert={true}
   />
 
-  <div class='bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>
+  <div class='flex bg-gray-100 pt-4 pb-14 sm:pt-8 sm:pb-16'>
     <div class='container'>
-      <div class='grid grid-cols-1 sm:grid-cols-2 gap-0.5 sm:gap-3'>
+      <div class='grid grid-cols-1 gap-0.5 sm:grid-cols-2 sm:gap-3'>
         {
           roleRoadmaps.map((roleRoadmap) => (
             <GridItem
@@ -46,4 +46,4 @@ const skillRoadmaps = await getRoadmapsByTag('skill-roadmap');
       </div>
     </div>
   </div>
-</BaseLayout>
+</BaseLayout>