[#2] Add postcss-pxtorem

package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
+    "postcss-pxtorem": "^6.1.0",
     "tailwindcss": "^3.4.3",
     "vite": "^5.2.0"
   }

postcss.config.js

@@ -2,5 +2,35 @@ export default {
     plugins: {
         tailwindcss: {},
         autoprefixer: {},
+        'postcss-pxtorem': {
+            rootValue: 16,
+            unitPrecision: 5,
+            propList: [
+                'font',
+                'font-size',
+                'line-height',
+                'letter-spacing',
+                'border*',
+                'background*',
+                'grid*',
+                'top',
+                'left',
+                'bottom',
+                'right',
+                'inset',
+                'width',
+                'height',
+                'margin*',
+                'padding*',
+                'max-*',
+                'min-*',
+                'gap*',
+            ],
+            selectorBlackList: [],
+            replace: true,
+            mediaQuery: true,
+            minPixelValue: 0,
+            exclude: /node_modules/i,
+        }
     }
 }

templates/index.twig

@@ -1,5 +1,5 @@
 {% extends '_layouts/base' %}
 
 {% block content %}
-    <h1 class="text-xl text-red-300 m-10">Hello Viget Craft CMS Starter</h1>
+    <h1 class="text-xl text-red-300 m-[20px]">Hello Viget Craft CMS Starter</h1>
 {% endblock %}