jonbio/tailwind.config.js

77 lines
1.9 KiB
JavaScript
Raw Permalink Normal View History

2024-10-14 00:18:50 -05:00
// @ts-check
const { fontFamily } = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')
/** @type {import("tailwindcss/types").Config } */
module.exports = {
content: [
'./node_modules/pliny/**/*.js',
'./app/**/*.{js,ts,jsx,tsx}',
'./pages/**/*.{js,ts,tsx}',
'./components/**/*.{js,ts,tsx}',
'./layouts/**/*.{js,ts,tsx}',
'./data/**/*.mdx',
],
darkMode: 'class',
theme: {
extend: {
lineHeight: {
11: '2.75rem',
12: '3rem',
13: '3.25rem',
14: '3.5rem',
},
fontFamily: {
sans: ['var(--font-space-grotesk)', ...fontFamily.sans],
},
colors: {
primary: colors.pink,
gray: colors.gray,
},
zIndex: {
60: '60',
70: '70',
80: '80',
},
typography: ({ theme }) => ({
DEFAULT: {
css: {
a: {
color: theme('colors.primary.500'),
'&:hover': {
color: `${theme('colors.primary.600')}`,
},
code: { color: theme('colors.primary.400') },
},
'h1,h2': {
fontWeight: '700',
letterSpacing: theme('letterSpacing.tight'),
},
h3: {
fontWeight: '600',
},
code: {
color: theme('colors.indigo.500'),
},
},
},
invert: {
css: {
a: {
color: theme('colors.primary.500'),
'&:hover': {
color: `${theme('colors.primary.400')}`,
},
code: { color: theme('colors.primary.400') },
},
'h1,h2,h3,h4,h5,h6': {
color: theme('colors.gray.100'),
},
},
},
}),
},
},
plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
}