rDrama/tailwind.config.js

72 lines
2.0 KiB
JavaScript

const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
purge: [
'files/templates/**/*.html',
'files/templates/*.html'
],
darkMode: 'class', // or 'media' or 'class'
theme: {
colors: {
primary: ({ opacityVariable, opacityValue }) => {
if (opacityValue !== undefined) {
return `rgba(var(--color-primary), ${opacityValue})`
}
if (opacityVariable !== undefined) {
return `rgba(var(--color-primary), var(${opacityVariable}, 1))`
}
return `rgb(var(--color-primary))`
},
transparent: 'transparent',
current: 'currentColor',
black: colors.black,
white: colors.white,
pink: colors.pink,
purple: colors.purple,
green: colors.green,
red: colors.red,
yellow: colors.amber,
blue: colors.sky
},
fontFamily: {
'sans-serif': ['Helvetica Neue', '-apple-system', 'BlinkMacSystemFont', 'Tahoma', 'Segoe UI', 'Helvetica', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'],
'heading': ['Delius Swash Caps'],
'serif': ['Georgia'],
'mono': 'SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace'
},
extend: {
boxShadow: {
'inset-b-white-07': '-1px -1px 1px rgba(255, 255, 255, 0.07) inset',
'inset-t-white-05': '0 1px 0 rgba(255, 255, 255, 0.05) inset',
'inset-t-white-10': '0 1px 0 rgba(255, 255, 255, 0.10) inset',
'inset-r-white-05': '1px 0 0 rgba(255, 255, 255, 0.05) inset'
},
zIndex: {
'100': 100
},
colors: {
gray: {
'100': '#f4f6f4',
'200': '#e5ebe7',
'300': '#d1dbd5',
'400': '#9bafa1',
'500': '#6a8073',
'600': '#4c6351',
'700': '#37523e',
'800': '#1f3726',
'900': '#112817'
},
}
},
},
variants: {
extend: {
backgroundColor: ['checked'],
boxShadow: ['checked'],
color: ['checked']
},
},
plugins: [],
}