tailwind.config.js

// Copied from
// https://github.com/shuding/nextra/blob/core/packages/nextra-theme-docs/tailwind.config.js

const colors = require('tailwindcss/colors');

const makePrimaryColor =
	l =>
	({opacityValue}) => {
		if (opacityValue === undefined) {
			return `hsl(var(--nextra-primary-hue) 100% ${l}%)`;
		}

		return `hsl(var(--nextra-primary-hue) 100% ${l}% / ${opacityValue})`;
	};

module.exports = {
	content: [
		'./{pages,components,context,styles}/**/*.{js,css,ts,tsx,mdx}',
		'./theme.config.js',
	],
	theme: {
		screens: {
			'sm': '640px',
			'md': '768px',
			'lg': '1024px',
			'xl': '1280px',
			'2xl': '1536px',
		},
		fontSize: {
			'xs': '.75rem',
			'sm': '.875rem',
			'base': '1rem',
			'lg': '1.125rem',
			'xl': '1.25rem',
			'2xl': '1.5rem',
			'3xl': '1.875rem',
			'4xl': '2.25rem',
			'5xl': '3rem',
			'6xl': '4rem',
		},
		colors: {
			transparent: 'transparent',
			current: 'currentColor',
			black: '#000000',
			white: '#ffffff',
			gray: colors.gray,
			slate: colors.slate,
			neutral: colors.neutral,
			red: colors.red,
			orange: colors.orange,
			yellow: colors.yellow,
			primary: {
				50: makePrimaryColor(97),
				100: makePrimaryColor(94),
				200: makePrimaryColor(86),
				300: makePrimaryColor(77),
				400: makePrimaryColor(66),
				500: makePrimaryColor(50),
				600: makePrimaryColor(45),
				700: makePrimaryColor(39),
				750: makePrimaryColor(35),
				800: makePrimaryColor(32),
				900: makePrimaryColor(24),
				1000: makePrimaryColor(12),
			},
		},
		extend: {
			colors: {
				dark: '#111111',
			},
		},
	},
	darkMode: 'class',
};