60 lines
1.4 KiB
TypeScript
60 lines
1.4 KiB
TypeScript
import { type Config } from "tailwindcss";
|
|
|
|
export default {
|
|
darkMode: ["class"],
|
|
content: ["./src/**/*.{js,ts,jsx,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
animation: {
|
|
marquee: "marquee 25s linear infinite",
|
|
marquee2: "marquee2 25s linear infinite",
|
|
},
|
|
keyframes: {
|
|
marquee: {
|
|
"0%": {
|
|
transform: "translateX(0%)",
|
|
},
|
|
"100%": {
|
|
transform: "translateX(-100%)",
|
|
},
|
|
},
|
|
marquee2: {
|
|
"0%": {
|
|
transform: "translateX(100%)",
|
|
},
|
|
"100%": {
|
|
transform: "translateX(0%)",
|
|
},
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: "var(--radius)",
|
|
md: "calc(var(--radius) - 2px)",
|
|
sm: "calc(var(--radius) - 4px)",
|
|
},
|
|
colors: {},
|
|
},
|
|
},
|
|
plugins: [
|
|
require("tailwindcss-radix")(),
|
|
require("tailwindcss-animate"),
|
|
require("@vidstack/react/tailwind.cjs")({
|
|
prefix: "media",
|
|
}),
|
|
customVariants,
|
|
],
|
|
} satisfies Config;
|
|
|
|
function customVariants({
|
|
addVariant,
|
|
matchVariant,
|
|
}: {
|
|
addVariant: any;
|
|
matchVariant: any;
|
|
}) {
|
|
// Strict version of `.group` to help with nesting.
|
|
matchVariant("parent-data", (value: any) => `.parent[data-${value}] > &`);
|
|
|
|
addVariant("hocus", ["&:hover", "&:focus-visible"]);
|
|
addVariant("group-hocus", [".group:hover &", ".group:focus-visible &"]);
|
|
}
|