tailwind.config.js

module.exports = {
	theme: {
		screens: {
			xs: "375px",
			sm: "576px",
			md: "768px",
			lg: "992px",
			xl: "1200px",
		},
		extend: {
			colors: {
				"theme-background": "var(--ion-background-color)",
				"theme-text": "var(--ion-text-color)",

				primary: "var(--ion-color-primary)",
				"primary-contrast": "var(--ion-color-primary-contrast)",
				"primary-shade": "var(--ion-color-primary-shade)",
				"primary-tint": "var(--ion-color-primary-tint)",

				secondary: "var(--ion-color-secondary)",
				"secondary-contrast": "var(--ion-color-secondary-contrast)",
				"secondary-shade": "var(--ion-color-secondary-shade)",
				"secondary-tint": "var(--ion-color-secondary-tint)",

				tertiary: "var(--ion-color-tertiary)",
				"tertiary-contrast": "var(--ion-color-tertiary-contrast)",
				"tertiary-shade": "var(--ion-color-tertiary-shade)",
				"tertiary-tint": "var(--ion-color-tertiary-tint)",

				success: "var(--ion-color-success)",
				"success-contrast": "var(--ion-color-success-contrast)",
				"success-shade": "var(--ion-color-success-shade)",
				"success-tint": "var(--ion-color-success-tint)",

				warning: "var(--ion-color-warning)",
				"warning-contrast": "var(--ion-color-warning-contrast)",
				"warning-shade": "var(--ion-color-warning-shade)",
				"warning-tint": "var(--ion-color-warning-tint)",

				danger: "var(--ion-color-danger)",
				"danger-contrast": "var(--ion-color-danger-contrast)",
				"danger-shade": "var(--ion-color-danger-shade)",
				"danger-tint": "var(--ion-color-danger-tint)",

				dark: "var(--ion-color-dark)",
				"dark-contrast": "var(--ion-color-dark-contrast)",
				"dark-shade": "var(--ion-color-dark-shade)",
				"dark-tint": "var(--ion-color-dark-tint)",

				medium: "var(--ion-color-medium)",
				"medium-contrast": "var(--ion-color-medium-contrast)",
				"medium-shade": "var(--ion-color-medium-shade)",
				"medium-tint": "var(--ion-color-medium-tint)",

				light: "var(--ion-color-light)",
				"light-contrast": "var(--ion-color-light-contrast)",
				"light-shade": "var(--ion-color-light-shade)",
				"light-tint": "var(--ion-color-light-tint)",
			},
		},
	},
	variants: {},
	plugins: [],
};