Update IDE helpers, Tailwind skill to v4, and refresh dependencies

This commit is contained in:
Darko Gjorgjijoski
2026-04-02 21:03:55 +02:00
parent 751bd4a1c8
commit 25986b7bd5
5 changed files with 15050 additions and 7187 deletions
+47 -19
View File
@@ -10,7 +10,7 @@ metadata:
## Documentation
Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation.
Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation.
## Basic Usage
@@ -18,22 +18,55 @@ Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation.
- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
- Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.
## Tailwind CSS v3 Specifics
## Tailwind CSS v4 Specifics
- Always use Tailwind CSS v3 and verify you're using only classes it supports.
- Configuration is done in the `tailwind.config.js` file.
- Import using `@tailwind` directives:
- Always use Tailwind CSS v4 and avoid deprecated utilities.
- `corePlugins` is not supported in Tailwind v4.
<!-- v3 Import Syntax -->
### CSS-First Configuration
In Tailwind v4, configuration is CSS-first using the `@theme` directive — no separate `tailwind.config.js` file is needed:
<!-- CSS-First Config -->
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@theme {
--color-brand: oklch(0.72 0.11 178);
}
```
### Import Syntax
In Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3:
<!-- v4 Import Syntax -->
```diff
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";
```
### Replaced Utilities
Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.
| Deprecated | Replacement |
|------------|-------------|
| bg-opacity-* | bg-black/* |
| text-opacity-* | text-black/* |
| border-opacity-* | border-black/* |
| divide-opacity-* | divide-black/* |
| ring-opacity-* | ring-black/* |
| placeholder-opacity-* | placeholder-black/* |
| flex-shrink-* | shrink-* |
| flex-grow-* | grow-* |
| overflow-ellipsis | text-ellipsis |
| decoration-slice | box-decoration-slice |
| decoration-clone | box-decoration-clone |
## Spacing
When listing items, use gap utilities for spacing; don't use margins.
Use `gap` utilities instead of margins for spacing between siblings:
<!-- Gap Utilities -->
```html
@@ -77,15 +110,10 @@ If existing pages and components support dark mode, new pages and components mus
</div>
```
## Verification
1. Check browser for visual rendering
2. Test responsive breakpoints
3. Verify dark mode if project uses it
## Common Pitfalls
- Using deprecated v3 utilities (bg-opacity-*, flex-shrink-*, etc.)
- Using `@tailwind` directives instead of `@import "tailwindcss"`
- Trying to use `tailwind.config.js` instead of CSS `@theme` directive
- Using margins for spacing between siblings instead of gap utilities
- Forgetting to add dark mode variants when the project uses dark mode
- Not checking existing project conventions before adding new utilities
- Overusing inline styles when Tailwind classes would suffice
- Forgetting to add dark mode variants when the project uses dark mode
+5909
View File
File diff suppressed because it is too large Load Diff
+7208 -5129
View File
File diff suppressed because it is too large Load Diff
+6 -4
View File
@@ -9,15 +9,12 @@
"type": "project",
"require": {
"php": "^8.4",
"aws/aws-sdk-php": "^3.336",
"barryvdh/laravel-dompdf": "^v3.0",
"doctrine/dbal": "^4.2",
"dragonmantank/cron-expression": "^v3.4",
"gotenberg/gotenberg-php": "^2.8",
"guzzlehttp/guzzle": "^7.9",
"hashids/hashids": "^5.0",
"invoiceshelf/modules": "^1.0.0",
"jasonmccreary/laravel-test-assertions": "^v2.4",
"laravel/framework": "^13.0",
"laravel/helpers": "^1.7",
"laravel/sanctum": "^4.0",
@@ -36,6 +33,7 @@
"require-dev": {
"barryvdh/laravel-ide-helper": "^3.5",
"fakerphp/faker": "^1.23",
"jasonmccreary/laravel-test-assertions": "^2.9",
"laravel/boost": "^2.3",
"laravel/pint": "^1.13",
"laravel/sail": "^1.41",
@@ -83,7 +81,11 @@
"dev": [
"Composer\\Config::disableProcessTimeout",
"npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite"
]
],
"ide-helper": [
"@php artisan ide-helper:generate",
"@php artisan ide-helper:meta"
]
},
"extra": {
"laravel": {
Generated
+1880 -2035
View File
File diff suppressed because it is too large Load Diff