Skip to content

Commit 4c7a49d

Browse files
RobbieTheWagnerRobbieTheWagner
authored
Update landing to tailwind 4 (#3343)
* Update landing to tailwind 4 * Remove tailwind from docs * Delete tailwind.config.mjs
1 parent 7c20d92 commit 4c7a49d

File tree

12 files changed

+591
-512
lines changed

12 files changed

+591
-512
lines changed

‎docs-src/astro.config.mjs‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { defineConfig } from 'astro/config';
22
import starlight from '@astrojs/starlight';
33

44
import starlightTypeDoc, { typeDocSidebarGroup } from 'starlight-typedoc';
5-
import tailwind from "@astrojs/tailwind";
65

76
// https://astro.build/config
87
export default defineConfig({
@@ -79,7 +78,6 @@ export default defineConfig({
7978
// },
8079
typeDocSidebarGroup
8180
]
82-
}),
83-
tailwind()
81+
})
8482
]
85-
});
83+
});

‎docs-src/package.json‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,17 @@
1111
"astro": "astro"
1212
},
1313
"dependencies": {
14-
"@astrojs/check": "^0.9.4",
1514
"@astrojs/starlight": "^0.31.1",
16-
"@astrojs/tailwind": "^6.0.2",
1715
"astro": "^5.16.6",
18-
"sharp": "^0.34.3",
1916
"shepherd.js": "workspace:*",
20-
"starlight-typedoc": "^0.18.0",
21-
"tailwindcss": "^3.4.17",
17+
"starlight-typedoc": "^0.18.0"
18+
},
19+
"devDependencies": {
20+
"@astrojs/check": "^0.9.4",
21+
"@flydotio/dockerfile": "^0.7.4",
22+
"sharp": "^0.34.3",
2223
"typedoc": "^0.26.7",
2324
"typedoc-plugin-markdown": "4.2.9",
2425
"typescript": "^5.7.3"
25-
},
26-
"devDependencies": {
27-
"@flydotio/dockerfile": "^0.7.4"
2826
}
2927
}

‎docs-src/tailwind.config.mjs‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎landing/astro.config.mjs‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
import { defineConfig } from 'astro/config';
22
import mdx from '@astrojs/mdx';
33
import sitemap from '@astrojs/sitemap';
4-
import tailwind from '@astrojs/tailwind';
4+
import tailwindcss from '@tailwindcss/vite';
55

66
import vercel from '@astrojs/vercel';
77

88
// https://astro.build/config
99
export default defineConfig({
1010
site: 'https://shepherdjs.dev',
1111

12-
integrations: [
13-
mdx(),
14-
sitemap(),
15-
tailwind()
16-
],
12+
integrations: [mdx(), sitemap()],
1713

1814
output: 'static',
1915
adapter: vercel(),
20-
});
16+
vite: {
17+
plugins: [tailwindcss()]
18+
}
19+
});

‎landing/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,21 @@
1111
"astro": "astro"
1212
},
1313
"dependencies": {
14-
"@astrojs/check": "^0.9.6",
1514
"@astrojs/mdx": "^4.3.13",
16-
"@astrojs/rss": "^4.0.14",
17-
"@astrojs/sitemap": "^3.6.0",
18-
"@astrojs/tailwind": "^6.0.2",
1915
"@astrojs/vercel": "^9.0.2",
2016
"@polar-sh/sdk": "^0.20.2",
2117
"astro": "^5.16.6",
22-
"shepherd.js": "workspace:*",
23-
"tailwindcss": "^3.4.19",
24-
"typescript": "^5.9.3"
18+
"shepherd.js": "workspace:*"
2519
},
2620
"devDependencies": {
21+
"@astrojs/check": "^0.9.6",
22+
"@astrojs/rss": "^4.0.14",
23+
"@astrojs/sitemap": "^3.6.0",
2724
"@tailwindcss/typography": "^0.5.19",
25+
"@tailwindcss/vite": "^4.1.18",
2826
"sharp": "^0.34.5",
27+
"tailwindcss": "^4.1.18",
28+
"typescript": "^5.9.3",
2929
"vite": "^7.3.0"
3030
}
3131
}

‎landing/src/components/ArticleCard.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
const { article } = Astro.props;
33
---
44

5-
<article class="column feature bg-gray-100 rounded">
5+
<article class="column feature bg-gray-100 rounded-sm">
66
<img
7-
class="object-cover object-center w-full lg:h-48 md:h-36 rounded"
7+
class="object-cover object-center w-full lg:h-48 md:h-36 rounded-sm"
88
src={`${article.image.filename}/m/360x240`}
99
alt={article.image.alt}
1010
/>

‎landing/src/layouts/BlogPost.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const { title, description } = Astro.props;
1414
<Header title={SITE_TITLE} />
1515

1616
<main>
17-
<article class="max-w-screen-md mb-20 mx-auto">
17+
<article class="max-w-(--breakpoint-md) mb-20 mx-auto">
1818
<slot />
1919
</article>
2020
<Footer />

‎landing/src/pages/pricing.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
317317
can use Shepherd.js for free.
318318
</div>
319319
</div>
320-
<div class="mt-6 lg:mt-2 lg:ml-10 lg:flex-shrink-0">
320+
<div class="mt-6 lg:mt-2 lg:ml-10 lg:shrink-0">
321321
<div class="bg-navy font-heading inline-block mb-4 w-56">
322322
<a
323323
class="button bg-white border-2 text-center border-navy p-4 text-navy whitespace-nowrap w-full"

‎landing/src/styles/styles.css‎

Lines changed: 113 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,116 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
1+
@import 'tailwindcss';
2+
3+
@plugin '@tailwindcss/typography';
4+
5+
@theme {
6+
--shadow-*: initial;
7+
--shadow-default:
8+
0 10px 30px 0 rgba(0, 0, 0, 1), 0 10px 20px 0 rgba(0, 0, 0, 1);
9+
10+
--color-*: initial;
11+
--color-transparent: transparent;
12+
--color-black: #000000;
13+
--color-navy: #16202d;
14+
--color-navy-light: #959fac;
15+
--color-grey: #f3f5f5;
16+
--color-grey-light: #eff2f3;
17+
--color-white: #ffffff;
18+
19+
--color-pink-200: #ffa6f6;
20+
--color-pink-300: #fa8cef;
21+
--color-pink-400: #fa7fee;
22+
23+
--font-*: initial;
24+
--font-body: Founders Grotesk, sans-serif;
25+
--font-heading: GT Pressura, sans-serif;
26+
27+
--text-*: initial;
28+
--text-xs: 0.75rem;
29+
--text-sm: 0.875rem;
30+
--text-base: 1rem;
31+
--text-lg: 1.125rem;
32+
--text-xl: 1.25rem;
33+
--text-2xl: 1.5rem;
34+
--text-3xl: 1.875rem;
35+
--text-4xl: 2.25rem;
36+
--text-5xl: 3rem;
37+
--text-6xl: 4rem;
38+
39+
--container-*: initial;
40+
--container-xxs: 13rem;
41+
--container-xs: 20rem;
42+
--container-sm: 24rem;
43+
--container-md: 28rem;
44+
--container-lg: 32rem;
45+
--container-xl: 36rem;
46+
--container-2xl: 42rem;
47+
--container-3xl: 48rem;
48+
--container-4xl: 56rem;
49+
--container-5xl: 64rem;
50+
--container-6xl: 72rem;
51+
--container-7xl: 80rem;
52+
--container-8xl: 90rem;
53+
--container-9xl: 100rem;
54+
--container-full: 100%;
55+
56+
--spacing-*: initial;
57+
--spacing-0: 0;
58+
--spacing-1: 0.25rem;
59+
--spacing-2: 0.5rem;
60+
--spacing-3: 0.75rem;
61+
--spacing-4: 1rem;
62+
--spacing-5: 1.25rem;
63+
--spacing-6: 1.5rem;
64+
--spacing-8: 2rem;
65+
--spacing-10: 2.5rem;
66+
--spacing-12: 3rem;
67+
--spacing-16: 4rem;
68+
--spacing-20: 5rem;
69+
--spacing-24: 6rem;
70+
--spacing-32: 8rem;
71+
--spacing-40: 10rem;
72+
--spacing-48: 12rem;
73+
--spacing-56: 14rem;
74+
--spacing-64: 16rem;
75+
--spacing-72: 18rem;
76+
--spacing-80: 20rem;
77+
--spacing-140: 36rem;
78+
--spacing-px: 1px;
79+
80+
--animate-ellipsis1: ellipsis 1s infinite;
81+
--animate-ellipsis2: ellipsis 1s infinite 0.333s;
82+
--animate-ellipsis3: ellipsis 1s infinite 0.666s;
83+
84+
@keyframes ellipsis {
85+
0% {
86+
transform: scale(0);
87+
}
88+
50% {
89+
transform: scale(1);
90+
}
91+
100% {
92+
transform: scale(0);
93+
}
94+
}
95+
}
96+
97+
/*
98+
The default border color has changed to `currentcolor` in Tailwind CSS v4,
99+
so we've added these compatibility styles to make sure everything still
100+
looks the same as it did with Tailwind CSS v3.
101+
102+
If we ever want to remove these styles, we need to add an explicit border
103+
color utility to any element that depends on these defaults.
104+
*/
105+
@layer base {
106+
*,
107+
::after,
108+
::before,
109+
::backdrop,
110+
::file-selector-button {
111+
border-color: var(--color-gray-200, currentcolor);
112+
}
113+
}
4114

5115
html,
6116
body {

‎landing/tailwind.config.mjs‎

Lines changed: 0 additions & 104 deletions
This file was deleted.

0 commit comments

Comments
 (0)