personal web client for Bluesky
mary.my.id
typescript
solidjs
bluesky
atcute
1import plugin from 'tailwindcss/plugin';
2
3/** @type {import('tailwindcss').Config} */
4export default {
5 content: ['./src/**/*.tsx'],
6 theme: {
7 extend: {
8 fontSize: {
9 de: ['0.8125rem', '1.25rem'],
10 },
11 zIndex: {
12 1: '1',
13 2: '2',
14 },
15 spacing: {
16 0.75: '0.1875rem',
17 7.5: '1.875rem',
18 9.5: '2.375rem',
19 13: '3.25rem',
20 17: '4.25rem',
21 18: '4.5rem',
22 22: '5.5rem',
23 30: '7.5rem',
24 84: '21rem',
25 120: '30rem',
26 },
27 borderWidth: {
28 3: '3px',
29 },
30 minWidth: {
31 14: '3.5rem',
32 16: '4rem',
33 },
34 minHeight: {
35 16: '4rem',
36 },
37 maxHeight: {
38 141: '35.25rem',
39 '50vh': '50vh',
40 },
41 flexGrow: {
42 2: '2',
43 4: '4',
44 },
45 aspectRatio: {
46 banner: '3 / 1',
47 },
48 keyframes: {
49 indeterminate: {
50 '0%': {
51 translate: '-100%',
52 },
53 '100%': {
54 translate: '400%',
55 },
56 },
57 },
58 animation: {
59 indeterminate: 'indeterminate 1s linear infinite',
60 },
61 boxShadow: {
62 // menu: 'rgba(var(--primary) / 0.2) 0px 0px 15px, rgba(var(--primary) / 0.15) 0px 0px 3px 1px',
63 },
64 dropShadow: {
65 // DEFAULT: ['0 1px 2px rgb(0 0 0 / .3)', '0 1px 1px rgb(0 0 0 / .1)'],
66 },
67 opacity: {
68 sm: 0.03,
69 'sm-pressed': 0.07,
70 md: 0.1,
71 'md-pressed': 0.2,
72 },
73 },
74 fontFamily: {
75 sans: `"Roboto", ui-sans-serif, sans-serif, "Noto Color Emoji", "Twemoji Mozilla"`,
76 mono: `"JetBrains Mono NL", ui-monospace, monospace`,
77 },
78 colors: ({ colors }) => {
79 return {
80 current: 'currentColor',
81 transparent: `transparent`,
82 white: `#ffffff`,
83 black: `#000000`,
84
85 background: `rgb(var(--p-background))`,
86 contrast: {
87 DEFAULT: `rgb(var(--p-contrast))`,
88 hinted: `rgb(var(--p-contrast-hinted))`,
89 muted: `rgb(var(--p-contrast-muted))`,
90 overlay: `rgb(var(--p-contrast-overlay))`,
91 },
92 accent: {
93 DEFAULT: `rgb(var(--p-accent))`,
94 hover: `rgb(var(--p-accent-hover))`,
95 active: `rgb(var(--p-accent-active))`,
96 fg: `rgb(var(--p-accent-fg))`,
97 },
98 repost: `rgb(var(--p-repost))`,
99 like: `rgb(var(--p-like))`,
100 error: `rgb(var(--p-error))`,
101 outline: {
102 DEFAULT: `rgb(var(--p-outline))`,
103 md: `rgb(var(--p-outline-md))`,
104 lg: `rgb(var(--p-outline-lg))`,
105 },
106
107 p: {
108 neutral: colors.neutral,
109 green: colors.green,
110 red: colors.red,
111 },
112 };
113 },
114 },
115 corePlugins: {
116 outlineStyle: false,
117 },
118 future: {
119 hoverOnlyWhenSupported: true,
120 },
121 plugins: [
122 plugin(({ addVariant, addUtilities }) => {
123 addVariant('modal', '&:modal');
124 addVariant('focus-within', '&:has(:focus-visible)');
125 // addVariant('hover', '.is-mouse &:hover');
126 // addVariant('group-hover', '.is-mouse .group &:hover');
127
128 addUtilities({
129 '.scrollbar-hide': {
130 '-ms-overflow-style': 'none',
131 'scrollbar-width': 'none',
132
133 '&::-webkit-scrollbar': {
134 display: 'none',
135 },
136 },
137
138 '.outline-none': { 'outline-style': 'none' },
139 '.outline': { 'outline-style': 'solid' },
140 '.outline-dashed': { 'outline-style': 'dashed' },
141 '.outline-dotted': { 'outline-style': 'dotted' },
142 '.outline-double': { 'outline-style': 'double' },
143 });
144 }),
145 ],
146};