ATlast — you'll never need to find your favorites on another platform again. Find your favs in the ATmosphere.
byarielm.fyi
atproto
1/** @type {import('tailwindcss').Config} */
2export default {
3 darkMode: "class", // Changed from 'media' to 'class' for manual control
4 content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
5 theme: {
6 extend: {
7 colors: {
8 firefly: {
9 glow: "#FCD34D",
10 amber: "#F59E0B",
11 orange: "#F97316",
12 pink: "#EC4899",
13 cyan: "#10D2F4",
14 },
15 cyan: { 250: "#72EEFD" },
16 purple: { 750: "#6A1DD1" },
17 yellow: { 650: "#C56508" },
18 orange: { 650: "#DF3F00" },
19 pink: { 650: "#CD206A" },
20 },
21 backgroundImage: ({ theme }) => ({
22 "firefly-banner": `linear-gradient(to right, ${theme("colors.yellow.400")}, ${theme("colors.orange.500")}, ${theme("colors.pink.600")})`,
23 "firefly-banner-dark": `linear-gradient(to right, ${theme("colors.yellow.600")}, ${theme("colors.orange.600")}, ${theme("colors.pink.700")})`,
24 }),
25 animation: {
26 float: "float 3s ease-in-out infinite",
27 },
28 keyframes: {
29 float: {
30 "0%, 100%": { transform: "translate(0, 0) scale(1)", opacity: "0.3" },
31 "25%": {
32 transform: "translate(10px, -20px) scale(1.2)",
33 opacity: "0.8",
34 },
35 "50%": {
36 transform: "translate(-5px, -40px) scale(1)",
37 opacity: "0.5",
38 },
39 "75%": {
40 transform: "translate(15px, -25px) scale(1.1)",
41 opacity: "0.9",
42 },
43 },
44 },
45 },
46 },
47};