Phoenix 1.6rc0 & Use proper Esbuild/Tailwind/Npm

1 files changed, 104 insertions, 0 deletions

diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
new file mode 100644
index 0000000..e51919e
--- /dev/null
+++ b/assets/tailwind.config.js
@@ -0,0 +1,104 @@
+const colors = require('tailwindcss/colors');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+   mode: "jit",
+   purge: [
+    './**/*.js',
+     '../lib/*_web/**/*.*ex'
+   ],
+   darkMode: 'media',
+   theme: {
+       colors: {
+           connection: colors.indigo,
+           connect: colors.red,
+           punch: colors.yellow,
+           touch: colors.green,
+           pulse: colors.pink,
+           transparent: 'transparent',
+           current: 'currentColor',
+           black: colors.black,
+           white: colors.white,
+           gray: colors.warmGray,
+           indigo: colors.indigo,
+           red: colors.rose,
+           yellow: colors.amber,
+           blue: colors.blue,
+           purple: colors.purple
+       },
+       extend: {
+           typography: (theme) => ({
+                light: {
+                    css: [
+                    {
+                        color: theme('colors.gray.300', defaultTheme.colors.gray[300]),
+                        '[class~="lead"]': {
+                        color: theme('colors.gray.300', defaultTheme.colors.gray[300]),
+                        },
+                        a: {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        },
+                        strong: {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        },
+                        'ol > li::before': {
+                        color: theme('colors.gray.400', defaultTheme.colors.gray[400]),
+                        },
+                        'ul > li::before': {
+                        backgroundColor: theme('colors.gray.600', defaultTheme.colors.gray[600]),
+                        },
+                        hr: {
+                        borderColor: theme('colors.gray.700', defaultTheme.colors.gray[700]),
+                        },
+                        blockquote: {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        borderLeftColor: theme('colors.gray.700', defaultTheme.colors.gray[700]),
+                        },
+                        h1: {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        },
+                        h2: {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        },
+                        h3: {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        },
+                        h4: {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        },
+                        'figure figcaption': {
+                        color: theme('colors.gray.400', defaultTheme.colors.gray[400]),
+                        },
+                        code: {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        },
+                        'a code': {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        },
+                        pre: {
+                        color: theme('colors.gray.700', defaultTheme.colors.gray[700]),
+                        },
+                        thead: {
+                        color: theme('colors.gray.200', defaultTheme.colors.gray[200]),
+                        borderBottomColor: theme('colors.gray.600', defaultTheme.colors.gray[600]),
+                        },
+                        'tbody tr': {
+                        borderBottomColor: theme('colors.gray.700', defaultTheme.colors.gray[700]),
+                        },
+                    },
+                    ],
+                },
+           }),
+       },
+   },
+   variants: {
+       extend: {
+           typography: ["dark"],
+           borderWidth: ['first'],
+       }
+   },
+    plugins: [
+        require('@tailwindcss/typography'),
+        require('@tailwindcss/aspect-ratio')
+    ],
+ }