Change tailwind.js to extend defaults
This commit is contained in:
parent
8933e81bc3
commit
26fe930df8
297
tailwind.js
297
tailwind.js
|
|
@ -1,7 +1,8 @@
|
||||||
var colors = {
|
let defaultConfig = require('tailwindcss/defaultConfig')()
|
||||||
'inherit': 'inherit',
|
|
||||||
'transparent': 'transparent',
|
|
||||||
|
|
||||||
|
var colors = {
|
||||||
|
...defaultConfig.colors,
|
||||||
|
'inherit': 'inherit',
|
||||||
'black': '#222b2f',
|
'black': '#222b2f',
|
||||||
'blue': 'hsl(203, 94%, 38%)',
|
'blue': 'hsl(203, 94%, 38%)',
|
||||||
'blue-dark': '#2779bd',
|
'blue-dark': '#2779bd',
|
||||||
|
|
@ -16,46 +17,15 @@ var colors = {
|
||||||
'grey-lightest': '#fafcfc',
|
'grey-lightest': '#fafcfc',
|
||||||
'orange': '#f6993f',
|
'orange': '#f6993f',
|
||||||
'red-dark': '#cc1f1a',
|
'red-dark': '#cc1f1a',
|
||||||
'white': '#ffffff',
|
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
const config = {
|
||||||
|
...defaultConfig,
|
||||||
colors: colors,
|
colors: colors,
|
||||||
|
textColors: colors,
|
||||||
screens: {
|
borderColors: colors,
|
||||||
'sm': '576px',
|
|
||||||
'md': '768px',
|
|
||||||
'lg': '992px',
|
|
||||||
'xl': '1200px',
|
|
||||||
},
|
|
||||||
|
|
||||||
fonts: {
|
fonts: {
|
||||||
'sans': [
|
...defaultConfig.fonts,
|
||||||
'-apple-system',
|
|
||||||
'BlinkMacSystemFont',
|
|
||||||
'Segoe UI',
|
|
||||||
'Roboto',
|
|
||||||
'Oxygen',
|
|
||||||
'Ubuntu',
|
|
||||||
'Cantarell',
|
|
||||||
'Fira Sans',
|
|
||||||
'Droid Sans',
|
|
||||||
'Helvetica Neue',
|
|
||||||
'sans-serif',
|
|
||||||
],
|
|
||||||
'serif': [
|
|
||||||
'Constantia',
|
|
||||||
'Lucida Bright',
|
|
||||||
'Lucidabright',
|
|
||||||
'Lucida Serif',
|
|
||||||
'Lucida',
|
|
||||||
'DejaVu Serif',
|
|
||||||
'Bitstream Vera Serif',
|
|
||||||
'Liberation Serif',
|
|
||||||
'Georgia',
|
|
||||||
'serif',
|
|
||||||
],
|
|
||||||
'mono': [
|
'mono': [
|
||||||
'Roboto Mono',
|
'Roboto Mono',
|
||||||
'Menlo',
|
'Menlo',
|
||||||
|
|
@ -66,260 +36,24 @@ module.exports = {
|
||||||
'monospace',
|
'monospace',
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
textSizes: {
|
|
||||||
'xs': '.75rem', // 12px
|
|
||||||
'sm': '.875rem', // 14px
|
|
||||||
'base': '1rem', // 16px
|
|
||||||
'lg': '1.125rem', // 18px
|
|
||||||
'xl': '1.25rem', // 20px
|
|
||||||
'2xl': '1.5rem', // 24px
|
|
||||||
'3xl': '1.875rem', // 30px
|
|
||||||
'4xl': '2.25rem', // 36px
|
|
||||||
'5xl': '3rem', // 48px
|
|
||||||
},
|
|
||||||
|
|
||||||
fontWeights: {
|
fontWeights: {
|
||||||
'normal': 400,
|
'normal': 400,
|
||||||
'medium': 500,
|
'medium': 500,
|
||||||
'bold': 700,
|
'bold': 700,
|
||||||
},
|
},
|
||||||
|
|
||||||
leading: {
|
|
||||||
'none': 1,
|
|
||||||
'tight': 1.25,
|
|
||||||
'normal': 1.5,
|
|
||||||
'loose': 2,
|
|
||||||
},
|
|
||||||
|
|
||||||
tracking: {
|
|
||||||
'tight': '-0.05em',
|
|
||||||
'normal': '0',
|
|
||||||
'wide': '0.05em',
|
|
||||||
},
|
|
||||||
|
|
||||||
textColors: colors,
|
|
||||||
|
|
||||||
backgroundColors: colors,
|
|
||||||
|
|
||||||
borderWidths: {
|
borderWidths: {
|
||||||
default: '1px',
|
...defaultConfig.borderWidths,
|
||||||
'0': '0',
|
|
||||||
'2': '2px',
|
|
||||||
'3': '3px',
|
'3': '3px',
|
||||||
'4': '4px',
|
|
||||||
'8': '8px',
|
|
||||||
},
|
},
|
||||||
|
|
||||||
borderColors: Object.assign({ default: colors['grey-light'] }, colors),
|
|
||||||
|
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
default: '.25rem',
|
...defaultConfig.borderRadius,
|
||||||
'sm': '.125rem',
|
|
||||||
'lg': '.5rem',
|
|
||||||
'full': '9999px',
|
|
||||||
'none': '0',
|
'none': '0',
|
||||||
},
|
},
|
||||||
|
|
||||||
width: {
|
|
||||||
'auto': 'auto',
|
|
||||||
'px': '1px',
|
|
||||||
'1': '0.25rem',
|
|
||||||
'2': '0.5rem',
|
|
||||||
'3': '0.75rem',
|
|
||||||
'4': '1rem',
|
|
||||||
'6': '1.5rem',
|
|
||||||
'8': '2rem',
|
|
||||||
'10': '2.5rem',
|
|
||||||
'12': '3rem',
|
|
||||||
'16': '4rem',
|
|
||||||
'24': '6rem',
|
|
||||||
'32': '8rem',
|
|
||||||
'40': '10rem',
|
|
||||||
'48': '12rem',
|
|
||||||
'64': '16rem',
|
|
||||||
'1/2': '50%',
|
|
||||||
'1/3': '33.33333%',
|
|
||||||
'2/3': '66.66667%',
|
|
||||||
'1/4': '25%',
|
|
||||||
'3/4': '75%',
|
|
||||||
'1/5': '20%',
|
|
||||||
'2/5': '40%',
|
|
||||||
'3/5': '60%',
|
|
||||||
'4/5': '80%',
|
|
||||||
'1/6': '16.66667%',
|
|
||||||
'5/6': '83.33333%',
|
|
||||||
'full': '100%',
|
|
||||||
'screen': '100vw'
|
|
||||||
},
|
|
||||||
|
|
||||||
height: {
|
|
||||||
'auto': 'auto',
|
|
||||||
'px': '1px',
|
|
||||||
'1': '0.25rem',
|
|
||||||
'2': '0.5rem',
|
|
||||||
'3': '0.75rem',
|
|
||||||
'4': '1rem',
|
|
||||||
'6': '1.5rem',
|
|
||||||
'8': '2rem',
|
|
||||||
'10': '2.5rem',
|
|
||||||
'12': '3rem',
|
|
||||||
'16': '4rem',
|
|
||||||
'24': '6rem',
|
|
||||||
'32': '8rem',
|
|
||||||
'48': '12rem',
|
|
||||||
'64': '16rem',
|
|
||||||
'full': '100%',
|
|
||||||
'screen': '100vh'
|
|
||||||
},
|
|
||||||
|
|
||||||
minWidth: {
|
|
||||||
'0': '0',
|
|
||||||
'full': '100%',
|
|
||||||
},
|
|
||||||
|
|
||||||
minHeight: {
|
|
||||||
'0': '0',
|
|
||||||
'full': '100%',
|
|
||||||
'screen': '100vh'
|
|
||||||
},
|
|
||||||
|
|
||||||
maxWidth: {
|
|
||||||
'xs': '20rem',
|
|
||||||
'sm': '30rem',
|
|
||||||
'md': '40rem',
|
|
||||||
'lg': '50rem',
|
|
||||||
'xl': '60rem',
|
|
||||||
'2xl': '70rem',
|
|
||||||
'3xl': '80rem',
|
|
||||||
'4xl': '90rem',
|
|
||||||
'5xl': '100rem',
|
|
||||||
'full': '100%',
|
|
||||||
},
|
|
||||||
|
|
||||||
maxHeight: {
|
|
||||||
'full': '100%',
|
|
||||||
'screen': '100vh',
|
|
||||||
},
|
|
||||||
|
|
||||||
padding: {
|
|
||||||
'px': '1px',
|
|
||||||
'0': '0',
|
|
||||||
'1': '0.25rem',
|
|
||||||
'2': '0.5rem',
|
|
||||||
'3': '0.75rem',
|
|
||||||
'4': '1rem',
|
|
||||||
'5': '1.25rem',
|
|
||||||
'6': '1.5rem',
|
|
||||||
'8': '2rem',
|
|
||||||
'16': '4rem',
|
|
||||||
},
|
|
||||||
|
|
||||||
margin: {
|
|
||||||
'auto': 'auto',
|
|
||||||
'px': '1px',
|
|
||||||
'0': '0',
|
|
||||||
'1': '0.25rem',
|
|
||||||
'2': '0.5rem',
|
|
||||||
'3': '0.75rem',
|
|
||||||
'4': '1rem',
|
|
||||||
'6': '1.5rem',
|
|
||||||
'8': '2rem',
|
|
||||||
'10': '2.5rem',
|
|
||||||
'12': '3rem',
|
|
||||||
'16': '4rem',
|
|
||||||
'24': '6rem',
|
|
||||||
},
|
|
||||||
|
|
||||||
negativeMargin: {
|
|
||||||
'px': '1px',
|
|
||||||
'0': '0',
|
|
||||||
'1': '0.25rem',
|
|
||||||
'2': '0.5rem',
|
|
||||||
'3': '0.75rem',
|
|
||||||
'4': '1rem',
|
|
||||||
'6': '1.5rem',
|
|
||||||
'8': '2rem',
|
|
||||||
'16': '4rem',
|
|
||||||
},
|
|
||||||
|
|
||||||
shadows: {
|
|
||||||
},
|
|
||||||
|
|
||||||
zIndex: {
|
|
||||||
'auto': 'auto',
|
|
||||||
'0': 0,
|
|
||||||
'10': 10,
|
|
||||||
'20': 20,
|
|
||||||
'30': 30,
|
|
||||||
'40': 40,
|
|
||||||
'50': 50,
|
|
||||||
},
|
|
||||||
|
|
||||||
opacity: {
|
|
||||||
'0': '0',
|
|
||||||
'25': '.25',
|
|
||||||
'50': '.5',
|
|
||||||
'75': '.75',
|
|
||||||
'100': '1',
|
|
||||||
},
|
|
||||||
|
|
||||||
svgFill: {
|
|
||||||
'current': 'currentColor',
|
|
||||||
},
|
|
||||||
|
|
||||||
svgStroke: {
|
|
||||||
'current': 'currentColor',
|
|
||||||
},
|
|
||||||
|
|
||||||
modules: {
|
modules: {
|
||||||
appearance: ['responsive'],
|
...defaultConfig.modules,
|
||||||
backgroundAttachment: ['responsive'],
|
|
||||||
backgroundColors: ['responsive', 'hover', 'focus'],
|
|
||||||
backgroundPosition: ['responsive'],
|
|
||||||
backgroundRepeat: ['responsive'],
|
|
||||||
backgroundSize: ['responsive'],
|
|
||||||
borderColors: ['responsive', 'hover', 'focus'],
|
|
||||||
borderRadius: ['responsive'],
|
|
||||||
borderStyle: ['responsive', 'hover', 'focus'],
|
borderStyle: ['responsive', 'hover', 'focus'],
|
||||||
borderWidths: ['responsive', 'hover', 'focus'],
|
borderWidths: ['responsive', 'hover', 'focus'],
|
||||||
cursor: ['responsive'],
|
|
||||||
display: ['responsive'],
|
|
||||||
flexbox: ['responsive'],
|
|
||||||
float: ['responsive'],
|
|
||||||
fonts: ['responsive'],
|
|
||||||
fontWeights: ['responsive', 'hover'],
|
|
||||||
height: ['responsive'],
|
|
||||||
leading: ['responsive'],
|
|
||||||
lists: ['responsive'],
|
|
||||||
margin: ['responsive'],
|
|
||||||
maxHeight: ['responsive'],
|
|
||||||
maxWidth: ['responsive'],
|
|
||||||
minHeight: ['responsive'],
|
|
||||||
minWidth: ['responsive'],
|
|
||||||
negativeMargin: ['responsive'],
|
|
||||||
opacity: ['responsive'],
|
|
||||||
overflow: ['responsive'],
|
|
||||||
padding: ['responsive'],
|
|
||||||
pointerEvents: ['responsive'],
|
|
||||||
position: ['responsive'],
|
|
||||||
resize: ['responsive'],
|
|
||||||
shadows: ['responsive'],
|
|
||||||
svgFill: [],
|
|
||||||
svgStroke: [],
|
|
||||||
textAlign: ['responsive'],
|
|
||||||
textColors: ['responsive', 'hover', 'focus'],
|
|
||||||
textSizes: ['responsive'],
|
|
||||||
textStyle: ['responsive', 'hover', 'focus'],
|
|
||||||
tracking: ['responsive'],
|
|
||||||
userSelect: ['responsive'],
|
|
||||||
verticalAlign: ['responsive'],
|
|
||||||
visibility: ['responsive'],
|
|
||||||
whitespace: ['responsive'],
|
|
||||||
width: ['responsive'],
|
|
||||||
zIndex: ['responsive'],
|
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
require('tailwindcss/plugins/container')({
|
require('tailwindcss/plugins/container')({
|
||||||
center: true,
|
center: true,
|
||||||
|
|
@ -330,11 +64,10 @@ module.exports = {
|
||||||
require('tailwindcss-skip-link')(),
|
require('tailwindcss-skip-link')(),
|
||||||
require('tailwindcss-vuejs')(),
|
require('tailwindcss-vuejs')(),
|
||||||
],
|
],
|
||||||
|
|
||||||
options: {
|
options: {
|
||||||
|
...defaultConfig.options,
|
||||||
important: true,
|
important: true,
|
||||||
separator: ':',
|
|
||||||
prefix: ''
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
module.exports = config
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue