Skip to content

Update landing to tailwind 4 #3343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
RobbieTheWagner merged 3 commits into from
Jan 29, 2026
Merged

Update landing to tailwind 4 #3343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
69e47cd
Update landing to tailwind 4
RobbieTheWagner Jan 29, 2026
821f5da
Remove tailwind from docs
RobbieTheWagner Jan 29, 2026
90409a0
Delete tailwind.config.mjs
RobbieTheWagner Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions docs-src/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

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

// https://astro.build/config
export default defineConfig({
Expand Down Expand Up @@ -79,7 +78,6 @@ export default defineConfig({
// },
typeDocSidebarGroup
]
}),
tailwind()
})
]
});
});
14 changes: 6 additions & 8 deletions docs-src/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,17 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.9.4",
"@astrojs/starlight": "^0.31.1",
"@astrojs/tailwind": "^6.0.2",
"astro": "^5.16.6",
"sharp": "^0.34.3",
"shepherd.js": "workspace:*",
"starlight-typedoc": "^0.18.0",
"tailwindcss": "^3.4.17",
"starlight-typedoc": "^0.18.0"
},
"devDependencies": {
"@astrojs/check": "^0.9.4",
"@flydotio/dockerfile": "^0.7.4",
"sharp": "^0.34.3",
"typedoc": "^0.26.7",
"typedoc-plugin-markdown": "4.2.9",
"typescript": "^5.7.3"
},
"devDependencies": {
"@flydotio/dockerfile": "^0.7.4"
}
}
8 changes: 0 additions & 8 deletions docs-src/tailwind.config.mjs
View file
Open in desktop

This file was deleted.

13 changes: 6 additions & 7 deletions landing/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwind from '@astrojs/tailwind';
import tailwindcss from '@tailwindcss/vite';

import vercel from '@astrojs/vercel';

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

integrations: [
mdx(),
sitemap(),
tailwind()
],
integrations: [mdx(), sitemap()],

output: 'static',
adapter: vercel(),
});
vite: {
plugins: [tailwindcss()]
}
});
14 changes: 7 additions & 7 deletions landing/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.9.6",
"@astrojs/mdx": "^4.3.13",
"@astrojs/rss": "^4.0.14",
"@astrojs/sitemap": "^3.6.0",
"@astrojs/tailwind": "^6.0.2",
"@astrojs/vercel": "^9.0.2",
"@polar-sh/sdk": "^0.20.2",
"astro": "^5.16.6",
"shepherd.js": "workspace:*",
"tailwindcss": "^3.4.19",
"typescript": "^5.9.3"
"shepherd.js": "workspace:*"
},
"devDependencies": {
"@astrojs/check": "^0.9.6",
"@astrojs/rss": "^4.0.14",
"@astrojs/sitemap": "^3.6.0",
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.1.18",
"sharp": "^0.34.5",
"tailwindcss": "^4.1.18",
"typescript": "^5.9.3",
"vite": "^7.3.0"
}
}
4 changes: 2 additions & 2 deletions landing/src/components/ArticleCard.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
const { article } = Astro.props;
---

<article class="column feature bg-gray-100 rounded">
<article class="column feature bg-gray-100 rounded-sm">
<img
class="object-cover object-center w-full lg:h-48 md:h-36 rounded"
class="object-cover object-center w-full lg:h-48 md:h-36 rounded-sm"
src={`${article.image.filename}/m/360x240`}
alt={article.image.alt}
/>
Expand Down
2 changes: 1 addition & 1 deletion landing/src/layouts/BlogPost.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const { title, description } = Astro.props;
<Header title={SITE_TITLE} />

<main>
<article class="max-w-screen-md mb-20 mx-auto">
<article class="max-w-(--breakpoint-md) mb-20 mx-auto">
<slot />
</article>
<Footer />
Expand Down
2 changes: 1 addition & 1 deletion landing/src/pages/pricing.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -317,7 +317,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
can use Shepherd.js for free.
</div>
</div>
<div class="mt-6 lg:mt-2 lg:ml-10 lg:flex-shrink-0">
<div class="mt-6 lg:mt-2 lg:ml-10 lg:shrink-0">
<div class="bg-navy font-heading inline-block mb-4 w-56">
<a
class="button bg-white border-2 text-center border-navy p-4 text-navy whitespace-nowrap w-full"
Expand Down
116 changes: 113 additions & 3 deletions landing/src/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,116 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';

@plugin '@tailwindcss/typography';

Comment on lines +1 to +4
Copy link

@coderabbitai coderabbitai bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Locate Biome config files
echo "=== Looking for Biome config files ==="
fd -a '^biome\.jsonc?$' 2>/dev/null || echo "No exact Biome config found"
find . -name 'biome.json*' -o -name '.biomerc.json*' 2>/dev/null | head -20

echo ""
echo "=== Checking for tailwindDirectives in any config ==="
rg -n "tailwindDirectives" 2>/dev/null || echo "No tailwindDirectives found"

echo ""
echo "=== Examining the CSS file ==="
wc -l landing/src/styles/styles.css 2>/dev/null || echo "File not found"

Repository: shipshapecode/shepherd

Length of output: 296

🏁 Script executed:

#!/bin/bash
# Read the CSS file to see the full context
echo "=== First 20 lines of CSS file ==="
head -20 landing/src/styles/styles.css

echo ""
echo "=== Checking for --color-gray-200 definition ==="
grep -n "color-gray-200" landing/src/styles/styles.css || echo "Not found in grep"

echo ""
echo "=== Checking `@theme` section ==="
sed -n '5,113p' landing/src/styles/styles.css | head -50

Repository: shipshapecode/shepherd

Length of output: 1900

🏁 Script executed:

#!/bin/bash
# Check the actual Biome configuration
echo "=== Biome config content ==="
cat ./biome.json 2>/dev/null || echo "biome.json not found in root"

echo ""
echo "=== Context around line 111 in CSS file ==="
sed -n '105,120p' landing/src/styles/styles.css

echo ""
echo "=== All color-gray references in CSS ==="
grep -n "color-gray" landing/src/styles/styles.css

Repository: shipshapecode/shepherd

Length of output: 2257

🏁 Script executed:

#!/bin/bash
# Check for any gray or grey color definitions
echo "=== All color definitions in `@theme` ==="
grep -n "^\s*--color-" landing/src/styles/styles.css | head -30

Repository: shipshapecode/shepherd

Length of output: 447

🌐 Web query:

Biome CSS linter tailwindDirectives support version 2.3

💡 Result:

Biome v2.3.x added opt-in support for parsing Tailwind-specific CSS directives/functions via css.parser.tailwindDirectives (intended for Tailwind v4 syntax such as @theme, @utility, @apply, etc.). This enables Biome to parse/format (and therefore lint without parse errors) Tailwind-directive CSS when the option is turned on. [1][2][3]

Enable in biome.json:

{
  "css": {
    "parser": {
      "tailwindDirectives": true
    }
  }
}

[2][4]

Or via CLI (added in 2.3.0):

biome lint --css-parse-tailwind-directives=true file.css

[1]

Note: the option is disabled by default. [4]

🏁 Script executed:

#!/bin/bash
# Check if there are any error logs or build errors related to this CSS file
echo "=== Check package.json for Biome/build scripts ==="
grep -A 5 -B 5 "biome\|css\|lint" package.json 2>/dev/null | head -30

echo ""
echo "=== Check for any existing linting issues or error reports ==="
find . -name "*.md" -type f | xargs grep -l "biome\|parse" 2>/dev/null | head -5

Repository: shipshapecode/shepherd

Length of output: 1319

🏁 Script executed:

#!/bin/bash
# Look for Tailwind config and see if there's documentation about CSS parsing
echo "=== Look for tailwind config ==="
fd -a '^tailwind\.' . 2>/dev/null

echo ""
echo "=== Check full color theme definitions to understand the issue ==="
sed -n '5,120p' landing/src/styles/styles.css | grep -A 2 -B 2 "color-"

Repository: shipshapecode/shepherd

Length of output: 672

Enable Tailwind v4 directive parsing in Biome CSS configuration.

The @import, @plugin, and @theme directives in this file require css.parser.tailwindDirectives to be enabled in biome.json. Without it, Biome's CSS linter will fail to parse the file.

Additionally, line 111 references var(--color-gray-200, currentcolor) but --color-gray-200 is not defined in the @theme section (which uses --color-grey instead). Either add the missing token or correct the variable name.

Suggested Biome config change 
{
  "css": {
    "parser": {
      "tailwindDirectives": true
    }
  }
}
🧰 Tools
🪛 Biome (2.3.13)

[error] 3-3: Tailwind-specific syntax is disabled.

Enable tailwindDirectives in the css parser options, or remove this if you are not using Tailwind CSS.

(parse)

🤖 Prompt for AI Agents 
In `@landing/src/styles/styles.css` around lines 1 - 4, Enable Tailwind directive
parsing in Biome by setting css.parser.tailwindDirectives to true in your Biome
config so the `@import`, `@plugin` and `@theme` directives in
landing/src/styles/styles.css are parsed; then fix the undefined token
referenced on line 111 by either adding a --color-gray-200 token to the `@theme`
section in styles.css (matching the referenced name) or change the usage of
var(--color-gray-200, currentcolor) to var(--color-grey, currentcolor) to match
the existing theme variable.

@theme {
--shadow-*: initial;
--shadow-default:
0 10px 30px 0 rgba(0, 0, 0, 1), 0 10px 20px 0 rgba(0, 0, 0, 1);

--color-*: initial;
--color-transparent: transparent;
--color-black: #000000;
--color-navy: #16202d;
--color-navy-light: #959fac;
--color-grey: #f3f5f5;
--color-grey-light: #eff2f3;
--color-white: #ffffff;

--color-pink-200: #ffa6f6;
--color-pink-300: #fa8cef;
--color-pink-400: #fa7fee;

--font-*: initial;
--font-body: Founders Grotesk, sans-serif;
--font-heading: GT Pressura, sans-serif;

--text-*: initial;
--text-xs: 0.75rem;
--text-sm: 0.875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--text-2xl: 1.5rem;
--text-3xl: 1.875rem;
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--text-6xl: 4rem;

--container-*: initial;
--container-xxs: 13rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
--container-8xl: 90rem;
--container-9xl: 100rem;
--container-full: 100%;

--spacing-*: initial;
--spacing-0: 0;
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-3: 0.75rem;
--spacing-4: 1rem;
--spacing-5: 1.25rem;
--spacing-6: 1.5rem;
--spacing-8: 2rem;
--spacing-10: 2.5rem;
--spacing-12: 3rem;
--spacing-16: 4rem;
--spacing-20: 5rem;
--spacing-24: 6rem;
--spacing-32: 8rem;
--spacing-40: 10rem;
--spacing-48: 12rem;
--spacing-56: 14rem;
--spacing-64: 16rem;
--spacing-72: 18rem;
--spacing-80: 20rem;
--spacing-140: 36rem;
--spacing-px: 1px;

--animate-ellipsis1: ellipsis 1s infinite;
--animate-ellipsis2: ellipsis 1s infinite 0.333s;
--animate-ellipsis3: ellipsis 1s infinite 0.666s;

@keyframes ellipsis {
0% {
transform: scale(0);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
}

/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.

If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}

html,
body {
Expand Down
104 changes: 0 additions & 104 deletions landing/tailwind.config.mjs
View file
Open in desktop

This file was deleted.

Loading