init

user/plugins/devtools/components/theme/tailwind/tailwind.config.js.twig

@@ -0,0 +1,70 @@
+const { colors } = require('tailwindcss/defaultTheme');
+
+module.exports = {
+  purge: [
+    '../../config/**/*.yaml',
+    '../../pages/**/*.md',
+    './blueprints/**/*.yaml',
+    './js/**/*.js',
+    './templates/**/*.twig',
+    './{{ component.name|hyphenize }}.yaml',
+    './{{ component.name|hyphenize }}.php'
+  ],
+  darkMode: 'class', //false or 'media' or 'class'
+  theme: {
+    extend: {
+      screens: {
+        sm: '640px',
+        md: '768px',
+        lg: '1024px',
+        xl: '1280px',
+        '2xl': '1536px'
+      }
+    },
+    colors: {
+      'primary': {
+        'lighter': colors.yellow['300'],
+        DEFAULT: colors.yellow['400'],
+        'darker' : colors.yellow['500'],
+      },
+      black: colors.black,
+      white: colors.white,
+      red: colors.red,
+      green: colors.green,
+      blue: colors.blue,
+      orange: colors.orange,
+      indigo: colors.indigo,
+      transparent: 'transparent',
+      'inherit': 'inherit',
+    },
+    typography: (theme) => ({
+      DEFAULT: {
+        css: {
+          color: 'inherit',
+          lineHeight: 'inherit',
+          maxWidth: 'inherit',
+          a: {
+            transition: 'all 500ms',
+            color: theme('colors.primary.DEFAULT'),
+            '&:hover': {
+              color: theme('colors.primary.darker')
+            },
+            textDecoration: 'none'
+          },
+          strong: {
+            color: 'inherit'
+          },
+        }
+      }
+    }),
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+    require('@tailwindcss/forms'),
+    require('tailwindcss-debug-screens'),
+  ],
+  important: false,
+}