website/tailwind.config.mjs

60 lines
1.4 KiB
JavaScript

const defaultTheme = require('tailwindcss/defaultTheme');
/** @type {import('tailwindcss').Config} */
export default {
content: [
'./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
'astro.config.mjs',
],
darkMode: 'selector',
theme: {
extend: {
colors: {
primary: {
lighter: '#3780ff',
DEFAULT: '#196aff',
darker: '#0064ff',
},
},
fontFamily: {
display: ['Quicksand', ...defaultTheme.fontFamily.sans],
sans: ['Open Sans', ...defaultTheme.fontFamily.sans],
},
backgroundImage: {
'hero-llama': "url('/images/bg-3.jpg')",
'hero-llama-small': "url('/images/hero-llamas-small.jpg')",
'hero-llama-2-small': "url('/images/hero-llamas-2-small.jpg')",
'hero-llama-3-small': "url('/images/hero-llamas-3-small.jpg')",
},
typography: ({ theme }) => ({
DEFAULT: {
css: {
code: {
borderRadius: theme('borderRadius.sm'),
paddingTop: theme('padding[0.5]'),
paddingRight: theme('padding[1]'),
paddingBottom: theme('padding[0.5]'),
paddingLeft: theme('padding[1]'),
},
'code::before': {
content: 'normal',
},
'code::after': {
content: 'normal',
},
th: {
textAlign: 'left',
},
},
},
}),
},
},
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
],
}