feat: add form design

tailwind.config.js

@@ -1,27 +1,42 @@
 /** @type {import('tailwindcss').Config} */
 const defaultTheme = require('tailwindcss/defaultTheme')
+const safelistLoader = require('./safelist-loader');
+const safelist = safelistLoader('packages/base/Configuration/Ext/Form/Yaml/Setup.yaml');
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 const config = {
   // Keep content defined always, but rely on safelist in dev
   content: [
+    "./packages/base/Configuration/**/*.yaml",
     "./packages/base/Resources/Private/**/*.html",
     "./packages/base/Resources/Private/**/*.js",
     "./packages/base/ContentBlocks/ContentElements/**/*.html",
     "./public/typo3conf/ext/*/Resources/Private/**/*.html",
   ],
   // Disable purging in dev by safelisting everything
-  safelist: isProduction ? [] : [{ pattern: /.*/ }],
+  safelist: isProduction ? [
+    ...safelist,
+  ] : [
+    'md:col-span-6',
+    { 
+      pattern: /col-span-\d+/,
+      variants: ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] // Include other variants (sm, lg) if needed
+    },
+    { pattern: /.*/ }
+  ],
   theme: {
     extend: {
       transitionProperty: {
         'max-height': 'max-height' // Add max-height to transition properties
       },
       fontFamily: {
-        sans: ['Inter', ...defaultTheme.fontFamily.sans],
-        hajime: ['"Hajime Sans"', ...defaultTheme.fontFamily.sans],
+
+        barlow: ['"Barlow"', ...defaultTheme.fontFamily.sans],
       },
+      // borderColor: {
+      //   primary: 'var(--color-primary)',
+      // },
       colors: {
         primary: 'var(--color-primary)',
         yellow: '#F5AE07',