struct_components/tailwind.config.js

React component library for dashboards

/** @type {import('tailwindcss').Config} */
const { createThemes } = require("tw-colors");

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

const baseColors = ["slate", "gray", "red", "orange", "emerald", "blue"];
const shadeMapping = {
	50: "950",
	100: "900",
	200: "800",
	300: "700",
	400: "600",
	500: "500",
	600: "400",
	700: "300",
	800: "200",
	900: "100",
	950: "50",
};
const generateThemeObject = (colors, mapping, invert = false) => {
	const theme = {};
	for (const baseColor of baseColors) {
		theme[baseColor] = {};
		for (const [key, value] of Object.entries(mapping)) {
			const shadeKey = invert ? value : key;
			theme[baseColor][key] = colors[baseColor][shadeKey];
		}
	}
	return theme;
};

const lightTheme = generateThemeObject(colors, shadeMapping, false);
const darkTheme = generateThemeObject(colors, shadeMapping, true);

const themes = {
	light: {
		...lightTheme,
		white: "#e2e2e2",
	},
	dark: {
		...darkTheme,
		white: colors.gray["950"],
		black: colors.gray["50"],
	},
};

export default {
	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
	darkMode: "class",
	theme: {
		screens: {
			sm: "640px",
			md: "768px",
			lg: "1024px",
			xl: "1280px",
			"2xl": "1536px",
		},
		colors: {
			...colors,
			primary: colors.slate,
			secondary: colors.blue,
			success: colors.emerald,
			warning: colors.orange,
			danger: colors.red,
		},
		fontFamily: {
			sans: ["Graphik", "sans-serif"],
			serif: ["Merriweather", "serif"],
			display: "Oswald, ui-serif", // Adds a new `font-display` class
		},
		extend: {
			colors: {
				...colors,
				primary: colors.slate,
				secondary: colors.blue,
				success: colors.emerald,
				warning: colors.orange,
				danger: colors.red,
			},
		},
	},
	corePlugins: {
		aspectRatio: false,
	},
	plugins: [
		createThemes(themes),
		require("@tailwindcss/forms"),
		require("@tailwindcss/typography"),
		require("@tailwindcss/aspect-ratio"),
		require("@tailwindcss/container-queries"),
	],
};