Untitled
unknown
plain_text
a month ago
3.0 kB
5
Indexable
const defaultTheme = require("tailwindcss/defaultTheme"); const colors = require("tailwindcss/colors"); const { default: flattenColorPalette, } = require("tailwindcss/lib/util/flattenColorPalette"); /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./app/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./styles/globals.css", ], darkMode: "class", theme: { extend: { animation: { spotlight: "spotlight 2s ease .75s 1 forwards", "meteor-effect": "meteor 5s linear infinite", opacity: "opacity 0.25s ease-in-out", appearFromRight: "appearFromRight 300ms ease-in-out", wiggle: "wiggle 1.5s ease-in-out infinite", popup: "popup 0.25s ease-in-out", shimmer: "shimmer 3s ease-out infinite alternate", }, keyframes: { spotlight: { "0%": { opacity: 0, transform: "translate(-72%, -62%) scale(0.5)", }, "100%": { opacity: 1, transform: "translate(-50%,-40%) scale(1)", }, }, meteor: { "0%": { transform: "rotate(215deg) translateX(0)", opacity: 1 }, "70%": { opacity: 1 }, "100%": { transform: "rotate(215deg) translateX(-500px)", opacity: 0, }, }, opacity: { "0%": { opacity: 0 }, "100%": { opacity: 1 }, }, appearFromRight: { "0%": { opacity: 0.3, transform: "translate(15%, 0)" }, "100%": { opacity: 1, transform: "translate(0)" }, }, wiggle: { "0%, 20%, 80%, 100%": { transform: "rotate(0deg)" }, "30%, 60%": { transform: "rotate(-2deg)" }, "40%, 70%": { transform: "rotate(2deg)" }, "45%": { transform: "rotate(-4deg)" }, "55%": { transform: "rotate(4deg)" }, }, popup: { "0%": { transform: "scale(0.8)", opacity: 0.8 }, "50%": { transform: "scale(1.1)", opacity: 1 }, "100%": { transform: "scale(1)", opacity: 1 }, }, shimmer: { "0%": { backgroundPosition: "0 50%" }, "50%": { backgroundPosition: "100% 50%" }, "100%": { backgroundPosition: "0 50%" }, }, }, backgroundImage: { gradient: "linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82)", }, }, }, plugins: [ addVariablesForColors, require("daisyui"), ], daisyui: { themes: ["synthwave"], }, }; // Plugin to add each Tailwind color as a global CSS variable function addVariablesForColors({ addBase, theme }) { let allColors = flattenColorPalette(theme("colors")); let newVars = Object.fromEntries( Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) ); addBase({ ":root": newVars, }); }
Editor is loading...
Leave a Comment