You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .agents/skills/tailwindcss-development/SKILL.md
+49-20Lines changed: 49 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
2
name: tailwindcss-development
3
-
description: "Styles applications using Tailwind CSS v3 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes."
3
+
description: "Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes."
4
4
license: MIT
5
5
metadata:
6
6
author: laravel
@@ -11,6 +11,7 @@ metadata:
11
11
## When to Apply
12
12
13
13
Activate this skill when:
14
+
14
15
- Adding styles to components or pages
15
16
- Working with responsive design
16
17
- Implementing dark mode
@@ -19,30 +20,63 @@ Activate this skill when:
19
20
20
21
## Documentation
21
22
22
-
Use `search-docs` for detailed Tailwind CSS v3 patterns and documentation.
23
+
Use `search-docs` for detailed Tailwind CSS v4 patterns and documentation.
23
24
24
25
## Basic Usage
25
26
26
27
- Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
27
28
- Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
28
29
- 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.
29
30
30
-
## Tailwind CSS v3 Specifics
31
+
## Tailwind CSS v4 Specifics
32
+
33
+
- Always use Tailwind CSS v4 and avoid deprecated utilities.
34
+
-`corePlugins` is not supported in Tailwind v4.
35
+
36
+
### CSS-First Configuration
31
37
32
-
- Always use Tailwind CSS v3 and verify you're using only classes it supports.
33
-
- Configuration is done in the `tailwind.config.js` file.
34
-
- Import using `@tailwind` directives:
38
+
In Tailwind v4, configuration is CSS-first using the `@theme` directive — no separate `tailwind.config.js` file is needed:
35
39
36
-
<!--v3 Import Syntax-->
40
+
<!--CSS-First Config-->
37
41
```css
38
-
@tailwind base;
39
-
@tailwind components;
40
-
@tailwind utilities;
42
+
@theme {
43
+
--color-brand: oklch(0.72 0.11 178);
44
+
}
45
+
```
46
+
47
+
### Import Syntax
48
+
49
+
In Tailwind v4, import Tailwind with a regular CSS `@import` statement instead of the `@tailwind` directives used in v3:
50
+
51
+
<!-- v4 Import Syntax -->
52
+
```diff
53
+
- @tailwind base;
54
+
- @tailwind components;
55
+
- @tailwind utilities;
56
+
+ @import "tailwindcss";
41
57
```
42
58
59
+
### Replaced Utilities
60
+
61
+
Tailwind v4 removed deprecated utilities. Use the replacements shown below. Opacity values remain numeric.
62
+
63
+
| Deprecated | Replacement |
64
+
|------------|-------------|
65
+
| bg-opacity-*| bg-black/*|
66
+
| text-opacity-*| text-black/*|
67
+
| border-opacity-*| border-black/*|
68
+
| divide-opacity-*| divide-black/*|
69
+
| ring-opacity-*| ring-black/*|
70
+
| placeholder-opacity-*| placeholder-black/*|
71
+
| flex-shrink-*| shrink-*|
72
+
| flex-grow-*| grow-*|
73
+
| overflow-ellipsis | text-ellipsis |
74
+
| decoration-slice | box-decoration-slice |
75
+
| decoration-clone | box-decoration-clone |
76
+
43
77
## Spacing
44
78
45
-
When listing items, use gap utilities for spacing; don't use margins.
79
+
Use `gap` utilities instead of margins for spacing between siblings:
46
80
47
81
<!-- Gap Utilities -->
48
82
```html
@@ -86,15 +120,10 @@ If existing pages and components support dark mode, new pages and components mus
86
120
</div>
87
121
```
88
122
89
-
## Verification
90
-
91
-
1. Check browser for visual rendering
92
-
2. Test responsive breakpoints
93
-
3. Verify dark mode if project uses it
94
-
95
123
## Common Pitfalls
96
124
125
+
- Using deprecated v3 utilities (bg-opacity-*, flex-shrink-*, etc.)
126
+
- Using `@tailwind` directives instead of `@import "tailwindcss"`
127
+
- Trying to use `tailwind.config.js` instead of CSS `@theme` directive
97
128
- Using margins for spacing between siblings instead of gap utilities
98
-
- Forgetting to add dark mode variants when the project uses dark mode
99
-
- Not checking existing project conventions before adding new utilities
100
-
- Overusing inline styles when Tailwind classes would suffice
129
+
- Forgetting to add dark mode variants when the project uses dark mode
Copy file name to clipboardExpand all lines: AGENTS.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,14 +23,14 @@ This application is a Laravel application and its main Laravel ecosystems packag
23
23
- vue (VUE) - v3
24
24
- eslint (ESLINT) - v9
25
25
- prettier (PRETTIER) - v2
26
-
- tailwindcss (TAILWINDCSS) - v3
26
+
- tailwindcss (TAILWINDCSS) - v4
27
27
28
28
## Skills Activation
29
29
30
30
This project has domain-specific skills available. You MUST activate the relevant skill whenever you work in that domain—don't wait until you're stuck.
31
31
32
32
-`pest-testing` — Tests applications using the Pest 3 PHP framework. Activates when writing tests, creating unit or feature tests, adding assertions, testing Livewire components, architecture testing, debugging test failures, working with datasets or mocking; or when the user mentions test, spec, TDD, expects, assertion, coverage, or needs to verify functionality works.
33
-
-`tailwindcss-development` — Styles applications using Tailwind CSS v3 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
33
+
-`tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
0 commit comments