tooling: prettier for astro and tailwind (#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"
   }
 }

pnpm-lock.yaml

@@ -15,6 +15,7 @@ specifiers:
   openai: ^3.2.1
   prettier: ^2.8.7
   prettier-plugin-astro: ^0.8.0
+  prettier-plugin-tailwindcss: ^0.2.6
   rehype-external-links: ^2.0.1
   roadmap-renderer: ^1.0.4
   tailwindcss: ^3.2.7
@@ -28,7 +29,7 @@ dependencies:
   npm-check-updates: 16.8.0
   rehype-external-links: 2.0.1
   roadmap-renderer: 1.0.4
-  tailwindcss: 3.2.7
+  tailwindcss: 3.2.7_postcss@8.4.21
 
 devDependencies:
   '@playwright/test': 1.32.1
@@ -39,6 +40,7 @@ devDependencies:
   openai: 3.2.1
   prettier: 2.8.7
   prettier-plugin-astro: 0.8.0
+  prettier-plugin-tailwindcss: 0.2.6_kb4gmvngxncp3puqxt3b6slppy
 
 packages:
 
@@ -128,7 +130,7 @@ packages:
       autoprefixer: 10.4.13_postcss@8.4.21
       postcss: 8.4.21
       postcss-load-config: 4.0.1_postcss@8.4.21
-      tailwindcss: 3.2.7
+      tailwindcss: 3.2.7_postcss@8.4.21
     transitivePeerDependencies:
       - ts-node
     dev: false
@@ -818,7 +820,7 @@ packages:
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.2.7
+      tailwindcss: 3.2.7_postcss@8.4.21
     dev: true
 
   /@tootallnate/once/2.0.0:
@@ -4211,6 +4213,62 @@ packages:
       synckit: 0.8.4
     dev: true
 
+  /prettier-plugin-tailwindcss/0.2.6_kb4gmvngxncp3puqxt3b6slppy:
+    resolution: {integrity: sha512-F+7XCl9RLF/LPrGdUMHWpsT6TM31JraonAUyE6eBmpqymFvDwyl0ETHsKFHP1NG+sEfv8bmKqnTxEbWQbHPlBA==}
+    engines: {node: '>=12.17.0'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-php': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@shufo/prettier-plugin-blade': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: '>=2.2.0'
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-php':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@shufo/prettier-plugin-blade':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        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-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 2.8.7
+      prettier-plugin-astro: 0.8.0
+    dev: true
+
   /prettier/2.8.7:
     resolution: {integrity: sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw==}
     engines: {node: '>=10.13.0'}
@@ -4965,10 +5023,12 @@ packages:
       '@pkgr/utils': 2.3.1
       tslib: 2.4.1
 
-  /tailwindcss/3.2.7:
+  /tailwindcss/3.2.7_postcss@8.4.21:
     resolution: {integrity: sha512-B6DLqJzc21x7wntlH/GsZwEXTBttVSl1FtCzC8WP4oBc/NKef7kaax5jeihkkCEWc831/5NDJ9gRNDK6NEioQQ==}
     engines: {node: '>=12.13.0'}
     hasBin: true
+    peerDependencies:
+      postcss: ^8.0.9
     dependencies:
       arg: 5.0.2
       chokidar: 3.5.3

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