init

tailwind.config.js

@@ -0,0 +1,165 @@
+//tailwind border color plugin powered by
+//https://github.com/tailwindcss/tailwindcss/pull/560#issuecomment-503222143
+var _ = require('lodash')
+var flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default
+
+
+module.exports = {
+  purge: ["./src/**/*.html", "./src/**/*.vue", "./src/**/*.jsx"],
+  theme: {
+    borderWidth: {
+      default: '1px',
+      '0': '0',
+      '2': '2px',
+      '3': '3px',
+      '4': '4px',
+      '6': '6px',
+      '8': '8px'
+    },
+    flex: {
+      '1': '1 1 0%',
+      auto: '1 1 auto',
+      initial: '0 1 auto',
+      none: 'none',
+      'post': '1 1 300px',
+      '100': '1 1 100%',
+      'post-large-content': '0 1 361px',
+    },
+    zIndex: {
+      '-10': '-10',
+      '0': 0,
+      '10': 10,
+      '20': 20,
+      '30': 30,
+      '40': 40,
+      '50': 50,
+      '25': 25,
+      '50': 50,
+      '75': 75,
+      '100': 100,
+      '1000': 1000,
+      'auto': 'auto',
+    },
+    corePlugins: {
+      container: false
+    },
+    extend: {},
+    radialGradients: {
+      shapes: { // defaults to this value
+        'default': 'ellipse',
+      },
+      sizes: { // defaults to this value
+        'default': '',
+      },
+      positions: { // defaults to these values
+        'default': 'center',
+        't': 'top'
+      },
+      colors: { // defaults to {}
+        'gray-to-black': ['rgba(25, 25, 25, 1)', 'rgba(8, 8, 8, 1)', 'rgba(0, 0, 0, 1)']
+      },
+    },
+  },
+  variants: {},
+  plugins: [
+    function ({
+      addComponents
+    }) {
+      addComponents({
+        '.container': {
+          maxWidth: '100%',
+          '@screen sm': {
+            maxWidth: '640px',
+          },
+          '@screen md': {
+            maxWidth: '768px',
+          },
+          '@screen lg': {
+            maxWidth: '1024px',
+          },
+          '@screen xl': {
+            maxWidth: '1040px',
+          },
+        }
+      })
+    },
+    function ({
+      addUtilities,
+      e,
+      theme,
+      variants
+    }) {
+      const colors = flattenColorPalette(theme('borderColor'))
+
+      const utilities = _.flatMap(_.omit(colors, 'default'), (value, modifier) => ({
+
+        [`.${e(`border-t-${modifier}`)}`]: {
+          borderTopColor: `${value}`
+        },
+        [`.${e(`border-r-${modifier}`)}`]: {
+          borderRightColor: `${value}`
+        },
+        [`.${e(`border-b-${modifier}`)}`]: {
+          borderBottomColor: `${value}`
+        },
+        [`.${e(`border-l-${modifier}`)}`]: {
+          borderLeftColor: `${value}`
+        },
+      }))
+
+      addUtilities(utilities, variants('borderColor'))
+    },
+    function ({
+      addBase,
+      config
+    }) {
+
+      addBase({
+        'h1': {
+          fontSize: config('theme.fontSize.5xl'),
+          fontWeight: config('theme.fontWeight.bold'),
+          fontFamily: config('theme.fontFamily.sans').join(', '),
+          marginTop: config('theme.margin.4'),
+          marginBottom: config('theme.margin.4')
+        },
+        'h2': {
+          fontSize: config('theme.fontSize.4xl'),
+          fontWeight: config('theme.fontWeight.bold'),
+          fontFamily: config('theme.fontFamily.sans').join(', '),
+          marginTop: config('theme.margin.4'),
+          marginBottom: config('theme.margin.4')
+        },
+        'h3': {
+          fontSize: config('theme.fontSize.3xl'),
+          fontWeight: config('theme.fontWeight.bold'),
+          fontFamily: config('theme.fontFamily.sans').join(', '),
+          marginTop: config('theme.margin.4'),
+          marginBottom: config('theme.margin.4')
+        },
+        'h4': {
+          fontSize: config('theme.fontSize.2xl'),
+          fontWeight: config('theme.fontWeight.bold'),
+          fontFamily: config('theme.fontFamily.sans').join(', '),
+          marginTop: config('theme.margin.4'),
+          marginBottom: config('theme.margin.4')
+        },
+        'h5': {
+          fontSize: config('theme.fontSize.xl'),
+          fontWeight: config('theme.fontWeight.bold'),
+          fontFamily: config('theme.fontFamily.sans').join(', '),
+          marginTop: config('theme.margin.4'),
+          marginBottom: config('theme.margin.4')
+        },
+        'h6': {
+          fontSize: config('theme.fontSize.lg'),
+          fontWeight: config('theme.fontWeight.bold'),
+          fontFamily: config('theme.fontFamily.sans').join(', '),
+          marginTop: config('theme.margin.4'),
+          marginBottom: config('theme.margin.4')
+        },
+      })
+    },
+    require('tailwindcss-tables')(),
+    require('tailwindcss-gradients')
+  ]
+}