Skip to content

Instantly share code, notes, and snippets.

@adamwathan

adamwathan/tailwind.config.js Secret

Created February 2, 2019 15:22
Show Gist options
  • Save adamwathan/569cf056631950ff0eda7f4b50240e98 to your computer and use it in GitHub Desktop.
Save adamwathan/569cf056631950ff0eda7f4b50240e98 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind config idea, where everything was treated like a plugin
Raw
tailwind.config.js
const colors = {
transparent: 'transparent',
black: '#22292f',
'grey-darkest': '#3d4852',
'grey-darker': '#606f7b',
'grey-dark': '#8795a1',
grey: '#b8c2cc',
'grey-light': '#dae1e7',
'grey-lighter': '#f1f5f8',
'grey-lightest': '#f8fafc',
white: '#ffffff',
'red-darkest': '#3b0d0c',
'red-darker': '#621b18',
'red-dark': '#cc1f1a',
red: '#e3342f',
'red-light': '#ef5753',
'red-lighter': '#f9acaa',
'red-lightest': '#fcebea',
'orange-darkest': '#462a16',
'orange-darker': '#613b1f',
'orange-dark': '#de751f',
orange: '#f6993f',
'orange-light': '#faad63',
'orange-lighter': '#fcd9b6',
'orange-lightest': '#fff5eb',
'yellow-darkest': '#453411',
'yellow-darker': '#684f1d',
'yellow-dark': '#f2d024',
yellow: '#ffed4a',
'yellow-light': '#fff382',
'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb',
'green-darkest': '#0f2f21',
'green-darker': '#1a4731',
'green-dark': '#1f9d55',
green: '#38c172',
'green-light': '#51d88a',
'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec',
'teal-darkest': '#0d3331',
'teal-darker': '#20504f',
'teal-dark': '#38a89d',
teal: '#4dc0b5',
'teal-light': '#64d5ca',
'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe',
'blue-darkest': '#12283a',
'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd',
blue: '#3490dc',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',
'indigo-darkest': '#191e38',
'indigo-darker': '#2f365f',
'indigo-dark': '#5661b3',
indigo: '#6574cd',
'indigo-light': '#7886d7',
'indigo-lighter': '#b2b7ff',
'indigo-lightest': '#e6e8ff',
'purple-darkest': '#21183c',
'purple-darker': '#382b5f',
'purple-dark': '#794acf',
purple: '#9561e2',
'purple-light': '#a779e9',
'purple-lighter': '#d6bbfc',
'purple-lightest': '#f3ebff',
'pink-darkest': '#451225',
'pink-darker': '#6f213f',
'pink-dark': '#eb5286',
pink: '#f66d9b',
'pink-light': '#fa7ea8',
'pink-lighter': '#ffbbca',
'pink-lightest': '#ffebef',
}
module.exports = {
prefix: '',
important: false,
separator: ':',
screens: {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
},
plugins: [
require('tailwindcss/plugins/container')(),
require('tailwindcss/plugins/lists')({
variants: ['responsive'],
values: {}
}),
require('tailwindcss/plugins/appearance')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/backgroundAttachment')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/backgroundColors')({
variants: ['responsive', 'hover', 'focus'],
values: colors
}),
require('tailwindcss/plugins/backgroundPosition')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/backgroundRepeat')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/backgroundSize')({
variants: ['responsive'],
values: {
auto: 'auto',
cover: 'cover',
contain: 'contain',
}
}),
require('tailwindcss/plugins/borderCollapse')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/borderColors')({
variants: ['responsive', 'hover', 'focus'],
values: Object.assign({ default: colors['grey-light'] }, colors)
}),
require('tailwindcss/plugins/borderRadius')({
variants: ['responsive'],
values: {
none: '0',
sm: '.125rem',
default: '.25rem',
lg: '.5rem',
full: '9999px',
}
}),
require('tailwindcss/plugins/borderStyle')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/borderWidths')({
variants: ['responsive'],
values: {
default: '1px',
'0': '0',
'2': '2px',
'4': '4px',
'8': '8px',
}
}),
require('tailwindcss/plugins/cursor')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/display')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/flexbox')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/float')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/fonts')({
variants: ['responsive'],
values: {
sans: [
'system-ui',
'BlinkMacSystemFont',
'-apple-system',
'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: [
'Menlo',
'Monaco',
'Consolas',
'Liberation Mono',
'Courier New',
'monospace',
],
}
}),
require('tailwindcss/plugins/fontWeights')({
variants: ['responsive', 'hover', 'focus'],
values: {
hairline: 100,
thin: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
}
}),
require('tailwindcss/plugins/height')({
variants: ['responsive'],
values: {
auto: 'auto',
px: '1px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'24': '6rem',
'32': '8rem',
'48': '12rem',
'64': '16rem',
full: '100%',
screen: '100vh',
}
}),
require('tailwindcss/plugins/leading')({
variants: ['responsive'],
values: {
none: 1,
tight: 1.25,
normal: 1.5,
loose: 2,
}
}),
require('tailwindcss/plugins/margin')({
variants: ['responsive'],
values: {
auto: 'auto',
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
}
}),
require('tailwindcss/plugins/maxHeight')({
variants: ['responsive'],
values: {
full: '100%',
screen: '100vh',
}
}),
require('tailwindcss/plugins/maxWidth')({
variants: ['responsive'],
values: {
xs: '20rem',
sm: '30rem',
md: '40rem',
lg: '50rem',
xl: '60rem',
'2xl': '70rem',
'3xl': '80rem',
'4xl': '90rem',
'5xl': '100rem',
full: '100%',
}
}),
require('tailwindcss/plugins/minHeight')({
variants: ['responsive'],
values: {
'0': '0',
full: '100%',
screen: '100vh',
}
}),
require('tailwindcss/plugins/minWidth')({
variants: ['responsive'],
values: {
'0': '0',
full: '100%',
}
}),
require('tailwindcss/plugins/negativeMargin')({
variants: ['responsive'],
values: {
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
},
}),
// require('tailwindcss/plugins/objectFit')({
// variants: ['responsive'],
// }),
// require('tailwindcss/plugins/objectPosition')({
// variants: ['responsive'],
// }),
require('tailwindcss/plugins/opacity')({
variants: ['responsive'],
values: {
'0': '0',
'25': '.25',
'50': '.5',
'75': '.75',
'100': '1',
}
}),
require('tailwindcss/plugins/outline')({
variants: ['focus'],
}),
require('tailwindcss/plugins/overflow')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/padding')({
variants: ['responsive'],
values: {
px: '1px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
}
}),
require('tailwindcss/plugins/pointerEvents')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/position')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/resize')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/shadows')({
variants: ['responsive'],
values: {
default: '0 2px 4px 0 rgba(0,0,0,0.10)',
md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
outline: '0 0 0 3px rgba(52,144,220,0.5)',
none: 'none',
}
}),
require('tailwindcss/plugins/svgFill')({
variants: ['responsive'],
values: {
current: 'currentColor',
}
}),
require('tailwindcss/plugins/svgStroke')({
variants: ['responsive'],
values: {
current: 'currentColor',
}
}),
require('tailwindcss/plugins/tableLayout')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/textAlign')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/textColors')({
variants: ['responsive', 'hover', 'focus'],
values: colors
}),
require('tailwindcss/plugins/textSizes')({
variants: ['responsive'],
values: {
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
}
}),
require('tailwindcss/plugins/textStyle')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/tracking')({
variants: ['responsive'],
values: {
tight: '-0.05em',
normal: '0',
wide: '0.05em',
}
}),
require('tailwindcss/plugins/userSelect')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/verticalAlign')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/visibility')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/whitespace')({
variants: ['responsive'],
}),
require('tailwindcss/plugins/width')({
variants: ['responsive'],
values: {
auto: 'auto',
px: '1px',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'24': '6rem',
'32': '8rem',
'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',
}
}),
require('tailwindcss/plugins/zIndex')({
variants: ['responsive'],
values: {
auto: 'auto',
'0': 0,
'10': 10,
'20': 20,
'30': 30,
'40': 40,
'50': 50,
}
}),
],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment