Update the doc's Tailwind config to use the new config format
Also had to create a self referencing package dependency so that the require('tailwindcss') call in the default config would work.
This commit is contained in:
Jonathan Reinink
parent
24199b140f
commit
e06e758312
2 changed files with 60 additions and 215 deletions
272
docs/tailwind.js
272
docs/tailwind.js
|
|
@ -1,4 +1,6 @@
|
|||
var colors = {
|
||||
var config = require('tailwindcss').defaultConfig()
|
||||
|
||||
config.colors = {
|
||||
'black': '#000000',
|
||||
'white': '#ffffff',
|
||||
'transparent': 'transparent',
|
||||
|
|
@ -70,217 +72,59 @@ var colors = {
|
|||
'pink-lighter': '#fdf2f5',
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
colors: colors,
|
||||
screens: {
|
||||
sm: '576px',
|
||||
md: '768px',
|
||||
lg: '992px',
|
||||
xl: '1200px',
|
||||
},
|
||||
text: {
|
||||
fonts: {
|
||||
'sans': 'Proxima Nova, proxima-nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
|
||||
'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
|
||||
'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
},
|
||||
sizes: {
|
||||
'base': '1rem', // 16px
|
||||
'xs': '.75rem', // 12px
|
||||
'sm': '.875rem', // 14px
|
||||
'md': '1rem', // 16px
|
||||
'lg': '1.125rem', // 18px
|
||||
'xl': '1.25rem', // 20px
|
||||
'2xl': '1.75rem', // 28px
|
||||
'3xl': '2.375rem', // 38px
|
||||
'4xl': '2.875rem', // 46px
|
||||
},
|
||||
weights: {
|
||||
'normal': 400,
|
||||
'semibold': 500,
|
||||
'bold': 700,
|
||||
},
|
||||
leading: {
|
||||
'none': 1,
|
||||
'tight': 1.25,
|
||||
'normal': 1.5,
|
||||
'loose': 2,
|
||||
},
|
||||
tracking: {
|
||||
'tight': '-0.05em',
|
||||
'normal': '0',
|
||||
'wide': '0.05em',
|
||||
},
|
||||
colors: {
|
||||
...colors
|
||||
},
|
||||
},
|
||||
backgrounds: {
|
||||
colors: {
|
||||
...colors
|
||||
},
|
||||
},
|
||||
borders: {
|
||||
widths: {
|
||||
default: '1px',
|
||||
'0': '0',
|
||||
'2': '2px',
|
||||
'4': '4px',
|
||||
'8': '8px',
|
||||
},
|
||||
colors: {
|
||||
default: colors['slate-lighter'],
|
||||
...colors
|
||||
},
|
||||
},
|
||||
radiuses: {
|
||||
default: '.25rem',
|
||||
sm: '.125rem',
|
||||
lg: '.5rem',
|
||||
pill: '9999px',
|
||||
},
|
||||
sizing: {
|
||||
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',
|
||||
'48': '12rem',
|
||||
'64': '16rem',
|
||||
'128': '32rem',
|
||||
'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',
|
||||
'5': '1.25rem',
|
||||
'6': '1.5rem',
|
||||
'7': '1.75rem',
|
||||
'8': '2rem',
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'24': '6rem',
|
||||
'32': '8rem',
|
||||
'48': '12rem',
|
||||
'64': '16rem',
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
},
|
||||
minHeight: {
|
||||
'0': '0',
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
},
|
||||
maxHeight: {
|
||||
'full': '100%',
|
||||
'screen': '100vh'
|
||||
},
|
||||
minWidth: {
|
||||
'0': '0',
|
||||
'full': '100%',
|
||||
},
|
||||
maxWidth: {
|
||||
'xs': '20rem',
|
||||
'sm': '30rem',
|
||||
'md': '40rem',
|
||||
'lg': '50rem',
|
||||
'xl': '60rem',
|
||||
'2xl': '70rem',
|
||||
'3xl': '80rem',
|
||||
'4xl': '90rem',
|
||||
'5xl': '100rem',
|
||||
'full': '100%',
|
||||
},
|
||||
},
|
||||
spacing: {
|
||||
padding: {
|
||||
'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'
|
||||
},
|
||||
margin: {
|
||||
'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',
|
||||
'80': '20rem',
|
||||
},
|
||||
negativeMargin: {
|
||||
'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'
|
||||
},
|
||||
},
|
||||
shadows: {
|
||||
default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
|
||||
md: '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
|
||||
lg: '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
|
||||
inner: 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
|
||||
none: 'none',
|
||||
},
|
||||
zIndex: {
|
||||
'0': 0,
|
||||
'10': 10,
|
||||
'20': 20,
|
||||
'30': 30,
|
||||
'40': 40,
|
||||
'50': 50,
|
||||
'auto': 'auto',
|
||||
},
|
||||
opacity: {
|
||||
'0': '0',
|
||||
'25': '.25',
|
||||
'50': '.5',
|
||||
'75': '.75',
|
||||
'100': '1',
|
||||
},
|
||||
config.fonts = {
|
||||
'sans': 'Proxima Nova, proxima-nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue',
|
||||
'serif': 'Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif',
|
||||
'mono': 'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
||||
}
|
||||
|
||||
config.textSizes = {
|
||||
'base': '1rem', // 16px
|
||||
'xs': '.75rem', // 12px
|
||||
'sm': '.875rem', // 14px
|
||||
'md': '1rem', // 16px
|
||||
'lg': '1.125rem', // 18px
|
||||
'xl': '1.25rem', // 20px
|
||||
'2xl': '1.75rem', // 28px
|
||||
'3xl': '2.375rem', // 38px
|
||||
'4xl': '2.875rem', // 46px
|
||||
}
|
||||
|
||||
config.fontWeights = {
|
||||
'normal': 400,
|
||||
'semibold': 500,
|
||||
'bold': 700,
|
||||
}
|
||||
|
||||
config.textColors = config.colors
|
||||
|
||||
config.backgroundColors = config.colors
|
||||
|
||||
config.borderColors = {
|
||||
default: config.colors['slate-lighter'],
|
||||
...config.colors,
|
||||
},
|
||||
|
||||
config.width = {
|
||||
'128': '32rem',
|
||||
...config.width,
|
||||
}
|
||||
|
||||
config.height = {
|
||||
'7': '1.75rem',
|
||||
...config.width,
|
||||
}
|
||||
|
||||
config.padding = {
|
||||
'10': '2.5rem',
|
||||
'12': '3rem',
|
||||
'16': '4rem',
|
||||
'80': '20rem',
|
||||
...config.padding,
|
||||
}
|
||||
|
||||
config.margin = config.padding
|
||||
|
||||
config.negativeMargin = config.padding
|
||||
|
||||
module.exports = config
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@
|
|||
"babel-preset-stage-3": "^6.24.1",
|
||||
"clean-css": "^4.1.9",
|
||||
"jest": "^20.0.4",
|
||||
"rimraf": "^2.6.1"
|
||||
"rimraf": "^2.6.1",
|
||||
"tailwindcss": "./"
|
||||
},
|
||||
"dependencies": {
|
||||
"commander": "^2.11.0",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue