92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import type { Config } from "tailwindcss";
|
|
|
|
const {
|
|
default: flattenColorPalette,
|
|
} = require("tailwindcss/lib/util/flattenColorPalette");
|
|
|
|
const config: Config = {
|
|
content: [
|
|
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./lib/**/*.{ts,tsx}",
|
|
],
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
animation: {
|
|
first: "moveVertical 30s ease infinite",
|
|
second: "moveInCircle 20s reverse infinite",
|
|
third: "moveInCircle 40s linear infinite",
|
|
fourth: "moveHorizontal 40s ease infinite",
|
|
fifth: "moveInCircle 20s ease infinite",
|
|
shimmer: "shimmer 2s linear infinite",
|
|
aurora: "aurora 60s linear infinite",
|
|
},
|
|
keyframes: {
|
|
aurora: {
|
|
from: {
|
|
backgroundPosition: "50% 50%, 50% 50%",
|
|
},
|
|
to: {
|
|
backgroundPosition: "350% 50%, 350% 50%",
|
|
},
|
|
},
|
|
shimmer: {
|
|
from: {
|
|
backgroundPosition: "0 0",
|
|
},
|
|
to: {
|
|
backgroundPosition: "-200% 0",
|
|
},
|
|
},
|
|
moveHorizontal: {
|
|
"0%": {
|
|
transform: "translateX(-50%) translateY(-10%)",
|
|
},
|
|
"50%": {
|
|
transform: "translateX(50%) translateY(10%)",
|
|
},
|
|
"100%": {
|
|
transform: "translateX(-50%) translateY(-10%)",
|
|
},
|
|
},
|
|
moveInCircle: {
|
|
"0%": {
|
|
transform: "rotate(0deg)",
|
|
},
|
|
"50%": {
|
|
transform: "rotate(180deg)",
|
|
},
|
|
"100%": {
|
|
transform: "rotate(360deg)",
|
|
},
|
|
},
|
|
moveVertical: {
|
|
"0%": {
|
|
transform: "translateY(-50%)",
|
|
},
|
|
"50%": {
|
|
transform: "translateY(50%)",
|
|
},
|
|
"100%": {
|
|
transform: "translateY(-50%)",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [addVariablesForColors],
|
|
};
|
|
export default config;
|
|
|
|
function addVariablesForColors({ addBase, theme }: any) {
|
|
let allColors = flattenColorPalette(theme("colors"));
|
|
let newVars = Object.fromEntries(
|
|
Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
|
|
);
|
|
|
|
addBase({
|
|
":root": newVars,
|
|
});
|
|
} |