Skip to content

Commit bfd64ec

Browse files
amirhhashemiamirhhashemi
authored
Format tailwind classes (#1214)
1 parent 9b45a24 commit bfd64ec

31 files changed

+371
-227
lines changed

‎.prettierrc

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@
33
"tabWidth": 2,
44
"semi": true,
55
"singleQuote": false,
6-
"useTabs": true
6+
"useTabs": true,
7+
"plugins": ["prettier-plugin-tailwindcss"]
78
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"eslint-plugin-solid": "^0.14.5",
5555
"globals": "^16.2.0",
5656
"prettier": "3.5.3",
57+
"prettier-plugin-tailwindcss": "^0.6.13",
5758
"tailwindcss": "^3.4.17",
5859
"typescript": "^5.8.3",
5960
"typescript-eslint": "^8.34.0",

‎pnpm-lock.yaml

Lines changed: 62 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/entry-server.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default createHandler(() => (
2020
<script src="/scripts/browser-specific.js" type="module" />
2121
{assets}
2222
</head>
23-
<body class="min-h-screen dark:bg-slate-900 bg-slate-50">
23+
<body class="min-h-screen bg-slate-50 dark:bg-slate-900">
2424
<div id="app">{children}</div>
2525
{scripts}
2626
</body>

‎src/middleware/legacy-routes-redirect.ts

Lines changed: 145 additions & 74 deletions
Large diffs are not rendered by default.

‎src/solidbase-theme/mdx-components.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const EraserLink = (
8282
aria-hidden={true}
8383
tabIndex="-1"
8484
href={props.href}
85-
class="no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#38bdf8),inset_0_calc(-1*(var(--tw-prose-underline-size,2px)+2px))_0_0_var(--tw-prose-underline,theme(colors.blue.400))] hover:[--tw-prose-underline-size:4px] dark:[--tw-prose-background:theme(colors.slate.900)] dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.blue.800))] dark:hover:[--tw-prose-underline-size:6px] dark:text-blue-400 text-blue-700 font-semibold"
85+
class="font-semibold text-blue-700 no-underline shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#38bdf8),inset_0_calc(-1*(var(--tw-prose-underline-size,2px)+2px))_0_0_var(--tw-prose-underline,theme(colors.blue.400))] hover:[--tw-prose-underline-size:4px] dark:text-blue-400 dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.blue.800))] dark:[--tw-prose-background:theme(colors.slate.900)] dark:hover:[--tw-prose-underline-size:6px]"
8686
rel="noopener noreferrer"
8787
>
8888
View on Eraser
@@ -104,7 +104,7 @@ export const h1 = (props: ParentProps) => (
104104
export const h2 = (props: ParentProps) => {
105105
return (
106106
<>
107-
<hr class="dark:prose-hr:border-slate-800 border-slate-400 my-8" />
107+
<hr class="my-8 border-slate-400 dark:prose-hr:border-slate-800" />
108108
<h2
109109
{...props}
110110
class="prose-headings:scroll-mt-28 prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]"
@@ -184,7 +184,7 @@ export const a = (props: ParentProps & { href: string }) => {
184184
return (
185185
<A
186186
addLocale
187-
class="no-underline shadow-[inset_0_calc(-1*(var(--tw-prose-underline-size,0.5px)+2px))_0_0_var(--tw-prose-underline,theme(colors.blue.400))] hover:[--tw-prose-underline-size:4px] dark:[--tw-prose-background:theme(colors.slate.900)] [--tw-prose-background:theme(colors.slate.50)] dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.blue.500))] dark:hover:[--tw-prose-underline-size:6px] dark:text-blue-300 text-blue-800 font-semibold"
187+
class="font-semibold text-blue-800 no-underline shadow-[inset_0_calc(-1*(var(--tw-prose-underline-size,0.5px)+2px))_0_0_var(--tw-prose-underline,theme(colors.blue.400))] [--tw-prose-background:theme(colors.slate.50)] hover:[--tw-prose-underline-size:4px] dark:text-blue-300 dark:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,theme(colors.blue.500))] dark:[--tw-prose-background:theme(colors.slate.900)] dark:hover:[--tw-prose-underline-size:6px]"
188188
{...rest}
189189
>
190190
{resolved()}
@@ -203,12 +203,12 @@ export const li = (props: ParentProps) => (
203203
</li>
204204
);
205205
export const ul = (props: ParentProps) => (
206-
<ul {...props} class="pl-6 mb-2 list-disc">
206+
<ul {...props} class="mb-2 list-disc pl-6">
207207
{props.children}
208208
</ul>
209209
);
210210
export const ol = (props: ParentProps) => (
211-
<ol {...props} class="list-decimal pl-8 mb-2">
211+
<ol {...props} class="mb-2 list-decimal pl-8">
212212
{props.children}
213213
</ol>
214214
);
@@ -225,7 +225,7 @@ export const pre = (props: ParentProps) => {
225225
return (
226226
<pre
227227
{...props}
228-
class="[&>code]:bg-white dark:[&>code]:!bg-slate-950 [&>code]:p-0 [&>code]:text-sm [&>code]:leading-normal custom-scrollbar"
228+
class="custom-scrollbar [&>code]:bg-white [&>code]:p-0 [&>code]:text-sm [&>code]:leading-normal dark:[&>code]:!bg-slate-950"
229229
>
230230
{props.children}
231231
</pre>
@@ -234,7 +234,7 @@ export const pre = (props: ParentProps) => {
234234
export const code = (props: ParentProps) => {
235235
return (
236236
<code
237-
class="inline-block not-prose !font-mono font-semibold bg-blue-200 dark:bg-slate-600/60 text-slate-900 dark:text-white px-1 py-0.5 rounded-lg text-[0.8em] leading-snug"
237+
class="not-prose inline-block rounded-lg bg-blue-200 px-1 py-0.5 !font-mono text-[0.8em] font-semibold leading-snug text-slate-900 dark:bg-slate-600/60 dark:text-white"
238238
{...props}
239239
>
240240
{props.children}

‎src/styles.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@
4848
}
4949

5050
html.windows .custom-scrollbar::-webkit-scrollbar {
51-
@apply w-5 h-5 bg-slate-200/80 rounded-xl border-[6px] border-solid border-transparent;
51+
@apply h-5 w-5 rounded-xl border-[6px] border-solid border-transparent bg-slate-200/80;
5252
background-clip: content-box;
5353
}
5454
html.windows.dark .custom-scrollbar::-webkit-scrollbar {
5555
@apply bg-slate-600/60;
5656
}
5757

5858
html.windows .custom-scrollbar::-webkit-scrollbar-thumb {
59-
@apply bg-slate-600/70 rounded-xl border-[6px] border-solid border-transparent;
59+
@apply rounded-xl border-[6px] border-solid border-transparent bg-slate-600/70;
6060
background-clip: content-box;
6161
}
6262
html.windows.dark .custom-scrollbar::-webkit-scrollbar-thumb {
@@ -90,7 +90,7 @@
9090

9191
@layer utilities {
9292
a[data-auto-heading] {
93-
@apply shadow-none text-slate-900 dark:text-white !important;
93+
@apply text-slate-900 shadow-none dark:text-white !important;
9494
}
9595

9696
a[data-auto-heading]:hover::after {
@@ -125,14 +125,14 @@
125125

126126
/* pace from solidbase */
127127
:root {
128-
--bprogress-color: theme('colors.blue.500') !important;
128+
--bprogress-color: theme("colors.blue.500") !important;
129129
}
130130

131131
/* twoslash from solidbase */
132132
html {
133-
--twoslash-cursor: #24292E;
133+
--twoslash-cursor: #24292e;
134134
}
135135

136136
html[data-theme*="dark"] {
137-
--twoslash-cursor: #BABED8;
138-
}
137+
--twoslash-cursor: #babed8;
138+
}

‎src/styles/expressive-code.css

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
.expressive-code-overrides .expressive-code {
2-
@apply font-mono my-4;
2+
@apply my-4 font-mono;
33
}
44

55
.expressive-code-overrides .expressive-code .frame {
66
@apply rounded-xl shadow-none ring-1 ring-slate-300/10;
77
}
88

99
.expressive-code-overrides .expressive-code .frame.is-terminal .header {
10-
@apply border-solid border-b border-x-0 border-t-0 border-slate-600/20;
10+
@apply border-x-0 border-b border-t-0 border-solid border-slate-600/20;
1111
}
1212

1313
html .expressive-code-overrides .expressive-code pre {
@@ -16,21 +16,21 @@ html .expressive-code-overrides .expressive-code pre {
1616

1717
/* Copy Button */
1818
.expressive-code-overrides .expressive-code .copy button::before {
19-
@apply dark:border-slate-500 border-blue-900 opacity-30;
19+
@apply border-blue-900 opacity-30 dark:border-slate-500;
2020
}
2121

2222
.expressive-code-overrides .expressive-code .copy button {
2323
@apply rounded-lg bg-transparent transition-all;
2424
}
2525

2626
.expressive-code-overrides .expressive-code .copy button::after {
27-
@apply dark:bg-slate-300/80 bg-blue-950/70;
27+
@apply bg-blue-950/70 dark:bg-slate-300/80;
2828
}
2929
html .expressive-code-overrides .expressive-code .copy button div {
3030
@apply bg-blue-300/60;
3131
}
3232
.expressive-code-overrides .expressive-code .copy .feedback {
33-
@apply bg-blue-500 transition-all dark:bg-blue-300 dark:text-blue-950 tracking-wide;
33+
@apply bg-blue-500 tracking-wide transition-all dark:bg-blue-300 dark:text-blue-950;
3434
font-family: var(--font-geist-mono);
3535
}
3636

@@ -70,7 +70,7 @@ html.windows
7070
.expressive-code-overrides
7171
.expressive-code
7272
pre::-webkit-scrollbar {
73-
@apply w-5 h-5 bg-slate-200/80 rounded-xl border-[6px] border-solid border-transparent;
73+
@apply h-5 w-5 rounded-xl border-[6px] border-solid border-transparent bg-slate-200/80;
7474
background-clip: content-box;
7575
}
7676
html.windows.dark
@@ -84,7 +84,7 @@ html.windows
8484
.expressive-code-overrides
8585
.expressive-code
8686
pre::-webkit-scrollbar-thumb {
87-
@apply bg-slate-600/70 rounded-xl border-[6px] border-solid border-transparent;
87+
@apply rounded-xl border-[6px] border-solid border-transparent bg-slate-600/70;
8888
background-clip: content-box;
8989
}
9090
html.windows.dark

‎src/styles/prism.css

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
pre[class*='language-'] {
2-
color: theme('colors.slate.50');
1+
pre[class*="language-"] {
2+
color: theme("colors.slate.50");
33
}
44

55
.token.tag,
@@ -8,40 +8,40 @@ pre[class*='language-'] {
88
.token.selector .class,
99
.token.selector.class,
1010
.token.function {
11-
color: theme('colors.pink.400');
11+
color: theme("colors.pink.400");
1212
}
1313

1414
.token.attr-name,
1515
.token.keyword,
1616
.token.rule,
1717
.token.pseudo-class,
1818
.token.important {
19-
color: theme('colors.slate.300');
19+
color: theme("colors.slate.300");
2020
}
2121

2222
.token.module {
23-
color: theme('colors.pink.400');
23+
color: theme("colors.pink.400");
2424
}
2525

2626
.token.attr-value,
2727
.token.class,
2828
.token.string,
2929
.token.property {
30-
color: theme('colors.sky.300');
30+
color: theme("colors.sky.300");
3131
}
3232

3333
.token.punctuation,
3434
.token.attr-equals {
35-
color: theme('colors.slate.500');
35+
color: theme("colors.slate.500");
3636
}
3737

3838
.token.unit,
3939
.language-css .token.function {
40-
color: theme('colors.teal.200');
40+
color: theme("colors.teal.200");
4141
}
4242

4343
.token.comment,
4444
.token.operator,
4545
.token.combinator {
46-
color: theme('colors.slate.400');
46+
color: theme("colors.slate.400");
4747
}

‎src/ui/callout.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,23 +92,23 @@ export function Callout(props: CalloutProps) {
9292

9393
return (
9494
<Alert.Root
95-
class={`my-6 rounded-3xl flex p-4 border w-full ${
95+
class={`my-6 flex w-full rounded-3xl border p-4 ${
9696
styles[mergedProps.type].container
9797
}`}
9898
>
99-
<IconComponent class="h-6 w-8 mt-1 flex-none" />
100-
<div class={`m-0 pb-1 px-4 w-full ${styles[mergedProps.type].title}`}>
99+
<IconComponent class="mt-1 h-6 w-8 flex-none" />
100+
<div class={`m-0 w-full px-4 pb-1 ${styles[mergedProps.type].title}`}>
101101
<Show
102102
when={props.title}
103103
fallback={
104-
<span class="capitalize font-semibold text-xl">
104+
<span class="text-xl font-semibold capitalize">
105105
{props.type || "Note"}
106106
</span>
107107
}
108108
>
109-
<span class="font-semibold text-xl">{mergedProps.title}</span>
109+
<span class="text-xl font-semibold">{mergedProps.title}</span>
110110
</Show>
111-
<div class="dark:prose-invert prose pr-7 [&>*:first-child]:mt-1">
111+
<div class="prose pr-7 dark:prose-invert [&>*:first-child]:mt-1">
112112
{mergedProps.children}
113113
</div>
114114
</div>

0 commit comments

Comments
 (0)