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 "float-1": "float 2s ease-in-out infinite",
28 "float-2": "float 2.5s ease-in-out 0.3s infinite",
29 "float-3": "float 3s ease-in-out 0.6s infinite",
30 },
31 keyframes: {
32 float: {
33 "0%, 100%": { transform: "translate(0, 0) scale(1)", opacity: "0.3" },
34 "25%": {
35 transform: "translate(10px, -20px) scale(1.2)",
36 opacity: "0.8",
37 },
38 "50%": {
39 transform: "translate(-5px, -40px) scale(1)",
40 opacity: "0.5",
41 },
42 "75%": {
43 transform: "translate(15px, -25px) scale(1.1)",
44 opacity: "0.9",
45 },
46 },
47 },
48 },
49 },
50};