tailwind.config.js

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

/** @type {import('tailwindcss').Config} */
module.exports = {
	content: ["./src/**/*.tsx"],
	theme: {
		extend: {
			textShadow: {
				DEFAULT: "hsl(var(--p)) 0 0 75px",
				footer: "hsl(var(--p)) 0 0 10px",
				sm: "hsl(var(--p)) 0 0 40px",
			},
			gradientColorStops: {
				"gradient-start": "hsl(var(--p))",
				"gradient-end": "hsl(var(--s))",
			},
			keyframes: {
				"gradient-foreground-1": {
					"from, 16.667%, to": {
						opacity: "1",
					},
					"33.333%, 83.333%": {
						opacity: "0",
					},
				},
				"gradient-background-1": {
					"from, 16.667%, to": {
						opacity: "0",
					},
					"25%, 91.667%": {
						opacity: "1",
					},
				},
				"gradient-foreground-2": {
					"from, to": {
						opacity: "0",
					},
					"33.333%, 50%": {
						opacity: "1",
					},
					"16.667%, 66.667%": {
						opacity: "0",
					},
				},
				"gradient-background-2": {
					"from, to": {
						opacity: "1",
					},
					"33.333%, 50%": {
						opacity: "0",
					},
					"25%, 58.333%": {
						opacity: "1",
					},
				},
				"gradient-foreground-3": {
					"from, 50%, to": {
						opacity: "0",
					},
					"66.667%, 83.333%": {
						opacity: "1",
					},
				},
				"gradient-background-3": {
					"from, 58.333%, 91.667%, to": {
						opacity: "1",
					},
					"66.667%, 83.333%": {
						opacity: "0",
					},
				},
			},
			animation: {
				"gradient-background-1": "gradient-background-1 8s infinite",
				"gradient-foreground-1": "gradient-foreground-1 8s infinite",
				"gradient-background-2": "gradient-background-2 8s infinite",
				"gradient-foreground-2": "gradient-foreground-2 8s infinite",
				"gradient-background-3": "gradient-background-3 8s infinite",
				"gradient-foreground-3": "gradient-foreground-3 8s infinite",
			},
			colors: {
				primary: {
					100: "#ffdfe2",
					200: "#ffbfc5",
					300: "#ff9fa7",
					400: "#ff7f8a",
					500: "#ff5f6d",
					600: "#cc4c57",
					700: "#993941",
					800: "#66262c",
					900: "#331316",
					DEFAULT: "#ff5f6d",
				},
				neutral: {
					100: "#d0d0d1",
					200: "#a0a2a3",
					300: "#717375",
					400: "#414547",
					500: "#121619",
					600: "#161b21",
					700: "#0b0d0f",
					800: "#07090a",
					900: "#040405",
					DEFAULT: "#121619",
					card: "#161b21",
				},
				secondary: {
					100: "#fff3e3",
					200: "#ffe7c6",
					300: "#ffdbaa",
					400: "#ffcf8d",
					500: "#ffc371",
					600: "#161b21",
					700: "#997544",
					800: "#664e2d",
					900: "#332717",
				},
			},
		},
	},
	daisyui: {
		styled: true,
		base: true,
		utils: true,
		rtl: false,
		prefix: "",
		logs: process.env.NODE_ENV === "development",
	},
	variants: {},
	plugins: [
		require("@tailwindcss/typography"),
		require("daisyui"),
		plugin(function ({ matchUtilities, theme }) {
			matchUtilities(
				{
					"text-shadow": (value) => ({
						textShadow: value,
					}),
				},
				{ values: theme("textShadow") }
			);
		}),
	],
};