pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1import { allThemes, defaultTheme, safeThemeList } from "./themes";
2import type { Config } from "tailwindcss";
3import plugin from "tailwindcss/plugin";
4
5const themer = require("tailwindcss-themer");
6
7const config: Config = {
8 content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
9 safelist: safeThemeList,
10 theme: {
11 extend: {
12 /* breakpoints */
13 screens: {
14 xs: "350px",
15 ssm: "400px",
16 "2xl": "1921px", // Custom breakpoint for screens at least 1920px wide
17 "3xl": "2650px", // Custom breakpoint for screens at least 2650px wide
18 "4xl": "3840px", // Custom breakpoint for screens at least 4096px wide
19 },
20
21 /* fonts */
22 fontFamily: {
23 main: "'DM Sans'", // "main": "'Open Sans'",
24 },
25
26 /* animations */
27 keyframes: {
28 "loading-pin": {
29 "0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
30 "20%": { height: "1em", "background-color": "white" },
31 },
32 "fade-in": {
33 "0%": { opacity: "0" },
34 "100%": { opacity: "1" },
35 },
36 "seek-left": {
37 "0%": { transform: "translateX(0) scale(1)", opacity: "1" },
38 "100%": { transform: "translateX(-50px) scale(1.2)", opacity: "0" },
39 },
40 "seek-right": {
41 "0%": { transform: "translateX(0) scale(1)", opacity: "1" },
42 "100%": { transform: "translateX(50px) scale(1.2)", opacity: "0" },
43 },
44 },
45 animation: {
46 "loading-pin": "loading-pin 1.8s ease-in-out infinite",
47 "fade-in": "fade-in 200ms ease-out forwards",
48 "seek-left": "seek-left 0.5s cubic-bezier(0, 0, 0.2, 1) forwards",
49 "seek-right": "seek-right 0.5s cubic-bezier(0, 0, 0.2, 1) forwards",
50 },
51 },
52 },
53 plugins: [
54 require("tailwind-scrollbar"),
55 themer({
56 defaultTheme: defaultTheme,
57 themes: [
58 {
59 name: "default",
60 selectors: [".theme-default"],
61 ...defaultTheme,
62 },
63 ...allThemes,
64 ],
65 }),
66 plugin(({ addVariant }) => {
67 addVariant("dir-neutral", "[dir] &");
68 }),
69 ],
70};
71
72export default config;