Update landing to tailwind 4 #3343
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
📝 WalkthroughWalkthroughThis change represents a migration from Astro's Tailwind integration to Tailwind CSS v4 with Vite plugin integration. Configuration files are removed from both docs-src and landing directories, dependencies are reorganized into devDependencies, Astro configs are updated to use the new Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
Coverage Impact This PR will not change total coverage. 🚦 See full report on Qlty Cloud »🛟 Help
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@landing/src/styles/styles.css`:
- Around line 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.
| @import 'tailwindcss'; | ||
|
|
||
| @plugin '@tailwindcss/typography'; | ||
|
|
There was a problem hiding this comment.
🧩 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 -50Repository: 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.cssRepository: 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 -30Repository: 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 -5Repository: 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.
Summary by CodeRabbit
Refactor
Style
Chores
✏️ Tip: You can customize this high-level summary in your review settings.