Files
kennethreitz.org/tailwind.config.js
T

366 lines
12 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./templates/**/*.{html,js}",
"./static/**/*.js"
],
theme: {
extend: {
colors: {
// Darker Heroku Purple Theme
heroku: {
50: '#f8f7fd',
100: '#f0eef9',
200: '#e3e0f4',
300: '#d0c8ec',
400: '#b5a7e0',
500: '#9b86d3',
600: '#8265c4',
700: '#6f52b0',
800: '#5c4394',
900: '#4e3979',
950: '#3a2b5c',
},
primary: {
DEFAULT: '#4e3979', // Darker Heroku purple
50: '#f8f7fd',
100: '#f0eef9',
200: '#e3e0f4',
300: '#d0c8ec',
400: '#b5a7e0',
500: '#9b86d3',
600: '#8265c4',
700: '#6f52b0',
800: '#5c4394',
900: '#4e3979',
950: '#3a2b5c',
},
text: {
DEFAULT: '#1f2937',
muted: '#6b7280',
light: '#9ca3af',
},
background: {
DEFAULT: '#ffffff',
subtle: '#f9fafb',
muted: '#f3f4f6',
},
},
fontFamily: {
'sans': ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
'serif': ['Crimson Text', 'Charter', 'Georgia', 'Times New Roman', 'serif'],
'mono': ['JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', 'monospace'],
},
fontSize: {
'xs': ['0.75rem', { lineHeight: '1rem' }],
'sm': ['0.875rem', { lineHeight: '1.25rem' }],
'base': ['1rem', { lineHeight: '1.5rem' }],
'lg': ['1.125rem', { lineHeight: '1.75rem' }],
'xl': ['1.25rem', { lineHeight: '1.75rem' }],
'2xl': ['1.5rem', { lineHeight: '2rem' }],
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
'5xl': ['3rem', { lineHeight: '1' }],
'6xl': ['3.75rem', { lineHeight: '1' }],
'7xl': ['4.5rem', { lineHeight: '1' }],
'8xl': ['6rem', { lineHeight: '1' }],
'9xl': ['8rem', { lineHeight: '1' }],
},
typography: (theme) => ({
DEFAULT: {
css: {
'--tw-prose-body': theme('colors.text.DEFAULT'),
'--tw-prose-headings': theme('colors.text.DEFAULT'),
'--tw-prose-links': theme('colors.primary.700'),
'--tw-prose-links-hover': theme('colors.primary.800'),
'--tw-prose-bold': theme('colors.text.DEFAULT'),
'--tw-prose-counters': theme('colors.text.muted'),
'--tw-prose-bullets': theme('colors.text.muted'),
'--tw-prose-hr': theme('colors.background.muted'),
'--tw-prose-quotes': theme('colors.text.DEFAULT'),
'--tw-prose-quote-borders': theme('colors.primary.200'),
'--tw-prose-captions': theme('colors.text.muted'),
'--tw-prose-code': theme('colors.primary.800'),
'--tw-prose-pre-code': theme('colors.background.DEFAULT'),
'--tw-prose-pre-bg': theme('colors.text.DEFAULT'),
'--tw-prose-th-borders': theme('colors.background.muted'),
'--tw-prose-td-borders': theme('colors.background.subtle'),
maxWidth: '75ch',
lineHeight: '1.65',
fontSize: '1.125rem',
color: 'var(--tw-prose-body)',
'[class~="lead"]': {
fontSize: '1.25rem',
lineHeight: '1.6',
marginTop: '1.2em',
marginBottom: '1.2em',
},
a: {
color: 'var(--tw-prose-links)',
textDecoration: 'none',
fontWeight: '500',
borderBottom: '1px solid transparent',
transition: 'all 0.2s ease',
'&:hover': {
color: 'var(--tw-prose-links-hover)',
borderBottomColor: 'var(--tw-prose-links-hover)',
},
},
strong: {
color: 'var(--tw-prose-bold)',
fontWeight: '600',
},
'ol[type="A"]': {
'--list-counter-style': 'upper-alpha',
},
'ol[type="a"]': {
'--list-counter-style': 'lower-alpha',
},
'ol[type="A" s]': {
'--list-counter-style': 'upper-alpha',
},
'ol[type="a" s]': {
'--list-counter-style': 'lower-alpha',
},
'ol[type="I"]': {
'--list-counter-style': 'upper-roman',
},
'ol[type="i"]': {
'--list-counter-style': 'lower-roman',
},
'ol[type="I" s]': {
'--list-counter-style': 'upper-roman',
},
'ol[type="i" s]': {
'--list-counter-style': 'lower-roman',
},
'ol[type="1"]': {
'--list-counter-style': 'decimal',
},
ol: {
listStyleType: 'var(--list-counter-style, decimal)',
},
'ol > li': {
position: 'relative',
},
'ol > li::marker': {
fontWeight: '400',
color: 'var(--tw-prose-counters)',
},
'ul > li': {
position: 'relative',
},
'ul > li::marker': {
color: 'var(--tw-prose-bullets)',
},
hr: {
borderColor: 'var(--tw-prose-hr)',
borderTopWidth: 1,
marginTop: '3em',
marginBottom: '3em',
},
blockquote: {
fontWeight: '400',
fontStyle: 'italic',
color: 'var(--tw-prose-quotes)',
borderLeftWidth: '0.25rem',
borderLeftColor: 'var(--tw-prose-quote-borders)',
quotes: '"\\201C""\\201D""\\2018""\\2019"',
marginTop: '1.6em',
marginBottom: '1.6em',
paddingLeft: '1em',
backgroundColor: theme('colors.primary.50'),
borderRadius: '0.375rem',
padding: '1.5rem',
},
'blockquote p:first-of-type::before': {
content: 'open-quote',
},
'blockquote p:last-of-type::after': {
content: 'close-quote',
},
h1: {
color: 'var(--tw-prose-headings)',
fontWeight: '700',
fontSize: '2.25rem',
marginTop: '0',
marginBottom: '0.8888889em',
lineHeight: '1.1111111',
},
'h1 strong': {
fontWeight: '800',
color: 'inherit',
},
h2: {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
fontSize: '1.875rem',
marginTop: '2em',
marginBottom: '1em',
lineHeight: '1.3333333',
},
'h2 strong': {
fontWeight: '700',
color: 'inherit',
},
h3: {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
fontSize: '1.5rem',
marginTop: '1.6em',
marginBottom: '0.6em',
lineHeight: '1.3333333',
},
'h3 strong': {
fontWeight: '700',
color: 'inherit',
},
h4: {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
marginTop: '1.5em',
marginBottom: '0.5em',
lineHeight: '1.5',
},
'h4 strong': {
fontWeight: '700',
color: 'inherit',
},
img: {
marginTop: '2em',
marginBottom: '2em',
borderRadius: '0.5rem',
boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
},
figure: {
marginTop: '2em',
marginBottom: '2em',
},
'figure > *': {
marginTop: '0',
marginBottom: '0',
},
figcaption: {
color: 'var(--tw-prose-captions)',
fontSize: '0.875rem',
lineHeight: '1.4285714',
marginTop: '0.8571429em',
},
code: {
color: 'var(--tw-prose-code)',
fontWeight: '600',
fontSize: '0.875rem',
backgroundColor: theme('colors.primary.100'),
borderRadius: '0.25rem',
paddingTop: '0.25rem',
paddingRight: '0.375rem',
paddingBottom: '0.25rem',
paddingLeft: '0.375rem',
},
'code::before': {
content: '""',
},
'code::after': {
content: '""',
},
'a code': {
color: 'inherit',
},
'h1 code': {
color: 'inherit',
},
'h2 code': {
color: 'inherit',
},
'h3 code': {
color: 'inherit',
},
'h4 code': {
color: 'inherit',
},
'blockquote code': {
color: 'inherit',
},
'thead th code': {
color: 'inherit',
},
pre: {
color: 'var(--tw-prose-pre-code)',
backgroundColor: 'var(--tw-prose-pre-bg)',
overflowX: 'auto',
fontWeight: '400',
fontSize: '0.875rem',
lineHeight: '1.7142857',
marginTop: '1.7142857em',
marginBottom: '1.7142857em',
borderRadius: '0.375rem',
paddingTop: '0.8571429em',
paddingRight: '1.1428571em',
paddingBottom: '0.8571429em',
paddingLeft: '1.1428571em',
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
},
'pre code': {
backgroundColor: 'transparent',
borderWidth: '0',
borderRadius: '0',
padding: '0',
fontWeight: 'inherit',
color: 'inherit',
fontSize: 'inherit',
fontFamily: 'inherit',
lineHeight: 'inherit',
},
'pre code::before': {
content: 'none',
},
'pre code::after': {
content: 'none',
},
table: {
width: '100%',
tableLayout: 'auto',
textAlign: 'left',
marginTop: '2em',
marginBottom: '2em',
fontSize: '0.875rem',
lineHeight: '1.7142857',
},
thead: {
borderBottomWidth: '1px',
borderBottomColor: 'var(--tw-prose-th-borders)',
},
'thead th': {
color: 'var(--tw-prose-headings)',
fontWeight: '600',
verticalAlign: 'bottom',
paddingRight: '0.5714286em',
paddingBottom: '0.5714286em',
paddingLeft: '0.5714286em',
},
'tbody tr': {
borderBottomWidth: '1px',
borderBottomColor: 'var(--tw-prose-td-borders)',
},
'tbody tr:last-child': {
borderBottomWidth: '0',
},
'tbody td': {
verticalAlign: 'baseline',
},
tfoot: {
borderTopWidth: '1px',
borderTopColor: 'var(--tw-prose-th-borders)',
},
'tfoot td': {
verticalAlign: 'top',
},
},
},
}),
},
},
plugins: [
require('@tailwindcss/typography'),
],
}