Skip to content

fix: add @tailwindcss/vite and update dependencies #199

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

Open
shazzar00ni wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix: add @tailwindcss/vite and update dependencies #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2735a79
chore: add @tailwindcss/vite plugin and update dependencies
shazzar00ni May 4, 2026
a82a1da
fix: migrate src/index.css to Tailwind v4 @import syntax
shazzar00ni May 6, 2026
b48fc37
merge: resolve conflicts with main
shazzar00ni May 6, 2026
081ede4
Update package.json
shazzar00ni May 6, 2026
bd53d87
Potential fix for pull request finding
shazzar00ni May 6, 2026
3b4795e
Potential fix for pull request finding
shazzar00ni May 6, 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
22 changes: 22 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 19 additions & 14 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,38 +19,43 @@
},
"dependencies": {
"framer-motion": "^12.38.0",
"heroicons": "^2.1.0",
"heroicons": "^2.2.0",
"react": "^19.2.5",
"react-dom": "^19.2.5"
},
"devDependencies": {
"@playwright/test": "^1.40.0",
"@tailwindcss/vite": "^4.2.1",
"@eslint/js": "^10.0.1",
"@playwright/test": "^1.59.1",
"@tailwindcss/vite": "^4.2.4",
"@testing-library/dom": "^10.4.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@types/react": "^19.2.13",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@typescript-eslint/eslint-plugin": "^8.56.0",
"@typescript-eslint/parser": "^8.58.1",
"@vitejs/plugin-react": "^5.1.4",
"@vitest/coverage-v8": "^4.1.3",
"eslint": "^10.0.1",
"@typescript-eslint/eslint-plugin": "^8.59.0",
"@typescript-eslint/parser": "^8.59.0",
"@vitejs/plugin-react": "^6.0.1",
"@vitest/coverage-v8": "^4.1.5",
"eslint": "^10.2.1",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.2",
"globals": "^17.4.0",
"globals": "^17.5.0",
"husky": "^9.1.7",
"jsdom": "^28.1.0",
"jsdom": "^29.0.2",
"jsonc-eslint-parser": "^3.1.0",
"lint-staged": "^16.4.0",
"prettier": "^3.8.3",
"tailwindcss": "^4.2.0",
"typescript": "^5.2.0",
"vite": "^7.3.1",
"tailwindcss": "^4.2.4",
"typescript": "^5.9.3",
"vite": "^8.0.10",
"vitest": "^4.1.5"
},
"engines": {
"node": "^20.19.0 || ^22.13.0 || >=24.0.0"
},
},
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"eslint --max-warnings 0 --fix",
Expand Down
50 changes: 30 additions & 20 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,37 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss";

@layer base {
html {
scroll-behavior: smooth;
}
@theme {
--color-light-50: oklch(97.95% 0.014 250.75);
--color-light-900: oklch(20.49% 0.038 264.38);
--color-dark-950: oklch(7.37% 0.019 285.85);
--color-dark-100: oklch(90.45% 0.02 285.85);
--color-teal-400: oklch(78.86% 0.162 174.21);
--color-teal-600: oklch(49.62% 0.104 181.28);
}
Comment on lines +3 to +10

body {
@apply bg-light-50 text-light-900 transition-colors duration-300;
}
html {
scroll-behavior: smooth;
}

.dark body {
@apply bg-dark-950 text-dark-100;
}
body {
background-color: var(--color-light-50);
color: var(--color-light-900);
transition: color 300ms, background-color 300ms;
}

@layer utilities {
.text-balance {
text-wrap: balance;
}
:is(.dark) body {
background-color: var(--color-dark-950);
color: var(--color-dark-100);
}

.gradient-text {
@apply bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-teal-600;
}
@utility text-balance {
text-wrap: balance;
}

@utility gradient-text {
-webkit-background-clip: text;
background-clip: text;
Comment thread
shazzar00ni marked this conversation as resolved.
-webkit-text-fill-color: transparent;
color: transparent;
background-image: linear-gradient(to right, var(--color-teal-400), var(--color-teal-600));
}
Comment on lines +3 to +37

@coderabbitai coderabbitai Bot May 6, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "== Config files =="
fd -HI 'biome.json|biome.jsonc|stylelint.config.*|.stylelintrc*|package.json'

echo
echo "== Relevant settings =="
fd -HI 'biome.json|biome.jsonc|stylelint.config.*|.stylelintrc*|package.json' -x sh -c '
  file="$1"
  echo "--- $file ---"
  rg -n -C2 "tailwindDirectives|ignoreAtRules|atRules|scss/at-rule-no-unknown|at-rule-no-unknown" "$file" || true
' sh {}

Repository: shazzar00ni/docugen

Length of output: 221

🏁 Script executed:

cat -n biome.json

Repository: shazzar00ni/docugen

Length of output: 4216

🏁 Script executed:

cat -n .stylelintrc.json

Repository: shazzar00ni/docugen

Length of output: 1689

🏁 Script executed:

head -50 src/index.css

Repository: shazzar00ni/docugen

Length of output: 871

Add Tailwind v4 directive support to CSS lint configurations.

The @theme and @utility directives are valid Tailwind v4 syntax, but both biome.json and .stylelintrc.json lack the necessary configuration to recognize them:

  • biome.json: The CSS parser config (lines 107–109) must enable Tailwind directive parsing by adding "tailwindDirectives": true to the css.parser object.
  • .stylelintrc.json: Stylelint must either ignore or explicitly allow the @theme and @utility at-rules. Add an at-rule-no-unknown rule configuration or ignoreAtRules list in the config to prevent unknown at-rule errors.

Without these changes, CSS linting will fail on the new directives during CI.

🧰 Tools
🪛 Biome (2.4.14)

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

(parse)

[error] 27-29: Tailwind-specific syntax is disabled.

(parse)

[error] 31-35: Tailwind-specific syntax is disabled.

(parse)

🪛 Stylelint (17.10.0)

[error] 3-3: Unexpected unknown at-rule "@theme" (scss/at-rule-no-unknown)

(scss/at-rule-no-unknown)

[error] 27-27: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)

(scss/at-rule-no-unknown)

[error] 31-31: Unexpected unknown at-rule "@Utility" (scss/at-rule-no-unknown)

(scss/at-rule-no-unknown)

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/index.css` around lines 3 - 35, The CSS uses Tailwind v4 at-rules `@theme`
and `@utility` which the linters currently treat as unknown; update biome.json by
enabling Tailwind directive parsing (set css.parser.tailwindDirectives to true)
so the CSS parser accepts `@theme/`@utility, and update .stylelintrc.json to allow
those at-rules (e.g., configure the at-rule-no-unknown rule with ignoreAtRules:
["theme","utility"] or add them to an ignoreAtRules list) so Stylelint no longer
flags `@theme` and `@utility` as unknown.

3 changes: 2 additions & 1 deletion vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
plugins: [react()],
plugins: [react(), tailwindcss()],
server: {
port: 3000,
},
Expand Down