tailwind.config.js 7.61 KiB
const Color = require('color');
const screens = require("./screens");
const alpha = (clr, val) => Color(clr).alpha(val).rgb().string();
const lighen = (clr, val) => Color(clr).lighten(val).rgb().string();
const darken = (clr, val) => Color(clr).darken(val).rgb().string();
module.exports = {
purge: {
content: [
"./source/**/*.mustache",
"./source/**/*.json",
"./source/**/*.js",
"./source/**/*.vue",
"./public/**/*.html",
],
options: {
whitelistPatterns: [
/^((sm|md|lg|xl)\:)?(block|inline|fixed|absolute|inline-block|flex|inline-flex|grid)/,
/^((sm|md|lg|xl)\:)?w-\d\d?/,
/^((sm|md|lg|xl)\:)?w-screen/,
/^((sm|md|lg|xl)\:)?h-\d\d?/,
/^((sm|md|lg|xl)\:)?h-screen/,
/^((sm|md|lg|xl)\:)?-?m.?-\d\d?/,
/^((sm|md|lg|xl)\:)?-?m.?-auto?/,
/^((sm|md|lg|xl)\:)?p.?-\d\d?/,
/^((sm|md|lg|xl)\:)?space-.?-\d\d?/,
/^((sm|md|lg|xl)\:)?hidden/,
/^((sm|md|lg|xl)\:)?block/,
/^((sm|md|lg|xl)\:)?inline-block/,
/^((sm|md|lg|xl)\:)?flex/,
/^((sm|md|lg|xl)\:)?inline-flex/,
/^((sm|md|lg|xl)\:)?grid/,
/^((sm|md|lg|xl)\:)?gap-\d\d?/,
/^((sm|md|lg|xl)\:)?static/,
/^((sm|md|lg|xl)\:)?flex-row-*/,
/^((sm|md|lg|xl)\:)?flex-col-*/,
/^((sm|md|lg|xl)\:)?grid-cols-*/,
/^((sm|md|lg|xl)\:)?col-span-*/,
/^((sm|md|lg|xl)\:)?row-span-*/,
/^((sm|md|lg|xl)\:)?order-*/,
/^((sm|md|lg|xl)\:)?items-*/,
/^((sm|md|lg|xl)\:)?float-*/,
/^((sm|md|lg|xl|hover)\:)?text-*/,
/^((sm|md|lg|xl)\:)?grid-flow-*/,
/^((sm|md|lg|xl)\:)?head-*/,
/^((sm|md|lg|xl)\:)?clearfix/,
/^((sm|md|lg|xl|hover)\:)?elevation-*/,
/^((sm|md|lg|xl|hover)\:)?border(-.*)?/,
/^((sm|md|lg|xl|hover)\:)?bg-opacity-\d\d?/,
/whitespace-*/,
/opacity-*/,
/^truncate/,
/^break-*/,
/^overflow-*/,
/^duration-*/,
/^max-w-*/,
/ico--*/,
],
}
},
theme: {
extend: {
maxWidth: {
'xxs': '16rem',
},
opacity: {
'85': '0.85',
},
lineHeight: { 'negative': '0.9',
},
spacing: {
'0/5': '0.125rem',
'14': '3.5rem',
'28': '7rem',
'36': '9rem',
'44': '11rem',
'52': '13rem',
'80': '20rem'
},
// flip-x
scale: {
'-1': '-1',
},
},
// Breakpoints
screens,
fontFamily: {
alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
body: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
condensed: ['Roboto Condensed', 'Helvetica', 'Arial', 'sans-serif'],
},
fontSize: {
'2xs': '.65rem',
'xs': '.75rem',
'sm': '.875rem',
'base': '1rem',
'lg': '1.125rem',
'xl': '1.3rem',
'2xl': '1.6rem',
'3xl': '1.875rem',
'4xl': '2.45rem',
'5xl': '3rem',
'6xl': '4rem',
'7xl': '5.3rem',
'8xl': '6.5rem',
'9xl': '7.5rem',
},
fontWeight: {
light: 300,
normal: 400,
medium: 500,
bold: 700,
},
colors: {
'transparent': 'transparent',
'black': '#000000',
'white': '#ffffff',
'grey': {
'25': '#fafafa',
'50': '#f7f7f7',
'100': '#f3f3f3',
'125': '#f0f0f0',
'200': '#adadad',
'300': '#4c4c4c',
'400': '#343434',
'500': '#303132',
'600': '#262626',
'700': '#202020',
'800': '#1f1f1f',
},
'olive': {
'100': '#d6e8b3'
},
'green': {
'200': '#92c6ab',
'300': '#76cc9f',
'400': '#4ca971',
}, 'yellow': {
'100': '#fff7bf',
'200': '#f7f38a',
'300': '#ffea5a',
'400': '#fde119',
},
'red': {
'600': '#d60d53'
},
'brands': {
'facebook': '#067ceb',
'twitter': '#00c9ff',
'gmail': '#ec230e',
'linkedin': '#0066a9',
},
'blue': {
'100': '#abcdef',
'200': '#76b4cf',
'300': '#027da8',
},
'cyan': {
'100': '#a7d4d1',
'200': '#57b3bd',
'300': '#3e8793',
'400': '#497280',
'500': '#004958',
},
'orange': {
'100': '#f2d29f',
'200': '#f1ae7b',
'300': '#ed9654',
},
'violet': {
'100': '#edc8bd',
'200': '#d28c94',
'300': '#8d415f',
'400': '#840048',
'500': '#670047',
},
},
container: {
center: true,
/* @note: needs to be kept in sync with tailwind css/atoms/container.pcss */
padding: {
default: '1rem',
xl: '2rem',
},
},
textDecorationColor: { // defaults to theme => theme('colors')
'white': '#fff',
'black': '#000',
},
},
variants: {
textDecorationColor: ['responsive', 'hover'],
background: ['responsive'],
appearance: ['responsive'],
space: ['responsive'],
text: ['responsive', 'hover'],
zIndex: ['responsive'],
},
plugins: [
require('tailwind-css-variables')(
{
// modules
},
{
// options
}
), require('tailwindcss-typography')({
// all these options default to the values specified here
ellipsis: false, // whether to generate ellipsis utilities
hyphens: false, // whether to generate hyphenation utilities
kerning: false, // whether to generate kerning utilities
textUnset: false, // whether to generate utilities to unset text properties
componentPrefix: 'typeset-', // the prefix to use for text style classes
}),
require('tailwindcss-elevation')(['responsive', 'hover'], {
color: "#dddddd",
opacityBoost: '0.23',
}),
require("./tailwind-plugins/buttons")({
defaultColor: {
text: 'white',
background: 'black',
iconBorder: 'grey.300'
},
colors: {
'black': {
text: 'white',
background: 'black',
iconBorder: 'grey.400',
hoverIconBorder: 'grey.600',
},
'grey-700': {
text: 'white',
background: 'grey.700',
iconBorder: 'grey.500',
hoverBackground: 'grey.400',
hoverIconBorder: 'grey.600',
},
'grey-500': {
text: 'white',
background: 'grey.500',
iconBorder: 'grey.300',
hoverBackground: 'grey.300',
hoverIconBorder: 'grey.400',
},
'grey-125': {
text: 'black',
background: 'grey.125',
hoverText: 'black',
},
'white': {
text: 'black',
background: 'white',
iconBorder: 'grey.100',
hoverText: 'black',
},
'blue-300': {
text: 'white',
background: 'blue.300',
},
'cyan-200': {
text: 'white',
background: 'cyan.200',
},
'green-300': {
text: 'white',
background: 'green.300',
},
'green-400': {
text: 'white',
background: 'green.400',
},
'orange-300': {
text: 'white',
background: 'orange.300',
}, 'violet-400': {
text: 'white',
background: 'violet.400',
},
'violet-500': {
text: 'white',
background: 'violet.500',
},
'red-600': {
text: 'white',
background: 'red.600',
},
'brands-facebook': {
text: 'white',
background: 'brands.facebook',
}
}
})
]
}