Skip to content

Commit d1ad482

Browse files
fix: format README with prettier
Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 9e96203 commit d1ad482

1 file changed

Lines changed: 25 additions & 19 deletions

File tree

README.md

Lines changed: 25 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@
33
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
44
[![Skills](https://img.shields.io/badge/skills.sh-tailwind--best--practices-blue)](https://skills.sh/ofershap/tailwind-best-practices/tailwind-best-practices)
55

6-
Stop your AI agent from generating Tailwind CSS v3 code. 12 rules for Tailwind v4 syntax, CSS-first config with @theme, modern utility patterns, and the anti-patterns every agent produces.
6+
Stop your AI agent from generating Tailwind CSS v3 code. 12 rules for Tailwind v4 syntax, CSS-first
7+
config with @theme, modern utility patterns, and the anti-patterns every agent produces.
78

8-
> AI coding assistants (Cursor, Claude Code, Copilot, Codex) are trained on Tailwind v3 data. They generate `tailwind.config.js`, `@tailwind` directives, `bg-opacity-50`, and other patterns that don't exist in Tailwind CSS v4. This plugin fixes that.
9+
> AI coding assistants (Cursor, Claude Code, Copilot, Codex) are trained on Tailwind v3 data. They
10+
> generate `tailwind.config.js`, `@tailwind` directives, `bg-opacity-50`, and other patterns that
11+
> don't exist in Tailwind CSS v4. This plugin fixes that.
912
1013
## Install
1114

@@ -19,31 +22,34 @@ Or copy `skills/` into your `.cursor/skills/` or `.claude/skills/` directory.
1922

2023
## What's Included
2124

22-
| Type | Name | Description |
23-
|------|------|-------------|
24-
| Skill | `tailwind-best-practices` | 12 rules covering @import, @theme, opacity, gradients, container queries, @utility, and more |
25-
| Rule | `best-practices` | Always-on behavioral rule that enforces v4 patterns on every file |
26-
| Command | `/audit` | Scan your codebase for Tailwind v3 anti-patterns |
25+
| Type | Name | Description |
26+
| ------- | ------------------------- | -------------------------------------------------------------------------------------------- |
27+
| Skill | `tailwind-best-practices` | 12 rules covering @import, @theme, opacity, gradients, container queries, @utility, and more |
28+
| Rule | `best-practices` | Always-on behavioral rule that enforces v4 patterns on every file |
29+
| Command | `/audit` | Scan your codebase for Tailwind v3 anti-patterns |
2730

2831
## What Agents Get Wrong
2932

3033
AI agents consistently produce these outdated Tailwind patterns:
3134

32-
| What the agent writes | What v4 actually uses |
33-
|-----------------------|-----------------------|
34-
| `tailwind.config.js` with JS objects | CSS-first `@theme { }` in your stylesheet |
35-
| `@tailwind base; @tailwind components;` | `@import "tailwindcss";` |
36-
| `bg-opacity-50`, `text-opacity-25` | `bg-red-500/50`, `text-white/80` |
37-
| `bg-gradient-to-r` | `bg-linear-to-r`, `bg-linear-45` |
38-
| `!flex`, `!bg-red-500` | `flex!`, `bg-red-500!` |
39-
| `bg-[--brand-color]` | `bg-(--brand-color)` |
40-
| `grid-cols-[max-content,auto]` | `grid-cols-[max-content_auto]` |
35+
| What the agent writes | What v4 actually uses |
36+
| --------------------------------------- | ----------------------------------------- |
37+
| `tailwind.config.js` with JS objects | CSS-first `@theme { }` in your stylesheet |
38+
| `@tailwind base; @tailwind components;` | `@import "tailwindcss";` |
39+
| `bg-opacity-50`, `text-opacity-25` | `bg-red-500/50`, `text-white/80` |
40+
| `bg-gradient-to-r` | `bg-linear-to-r`, `bg-linear-45` |
41+
| `!flex`, `!bg-red-500` | `flex!`, `bg-red-500!` |
42+
| `bg-[--brand-color]` | `bg-(--brand-color)` |
43+
| `grid-cols-[max-content,auto]` | `grid-cols-[max-content_auto]` |
4144

4245
## Related Plugins
4346

44-
- [shadcn-best-practices](https://github.com/ofershap/shadcn-best-practices) - shadcn/ui component patterns, forms, theming
45-
- [typescript-best-practices](https://github.com/ofershap/typescript-best-practices) - TypeScript 5.x strict patterns
46-
- [sveltekit-best-practices](https://github.com/ofershap/sveltekit-best-practices) - Svelte 5 runes and SvelteKit patterns
47+
- [shadcn-best-practices](https://github.com/ofershap/shadcn-best-practices) - shadcn/ui component
48+
patterns, forms, theming
49+
- [typescript-best-practices](https://github.com/ofershap/typescript-best-practices) - TypeScript
50+
5.x strict patterns
51+
- [sveltekit-best-practices](https://github.com/ofershap/sveltekit-best-practices) - Svelte 5 runes
52+
and SvelteKit patterns
4753

4854
## Author
4955

0 commit comments

Comments
 (0)