Files
ComfyUI_frontend/.vscode/tailwind.json
filtered 7b1cce1d0e Add VS Code CSS validation support (#5893)
## Summary

Adds VS Code custom CSS data for proper validation of non-standard CSS
properties and Tailwind v4 directives.

## Changes

- **What**: Custom CSS data files for VS Code CSS language service
validation
  - `app-region` - Electron draggable regions  
  - `speak` - Deprecated aural stylesheet property
  - `@custom-variant` - Tailwind v4 custom variant definitions
  - `@utility` - Tailwind v4 custom utility definitions
- Fixes broken documentation links in existing Tailwind directive
references

## Review Focus

Documentation links verified against current Tailwind CSS and Electron
documentation.

## Screenshots

Current: Yellow squigglies

<img width="338" height="179" alt="image"
src="https://github.com/user-attachments/assets/652040f5-8e0b-486b-95f6-2fa8f9bf9ba7"
/><img width="499" height="180" alt="image"
src="https://github.com/user-attachments/assets/43d16210-7fbf-4ef8-b0e1-9a16e59d1d85"
/>

Proposed: Satisfying lack of warnings

<img width="173" height="62" alt="image"
src="https://github.com/user-attachments/assets/25f1c1c4-22b7-483b-9848-3030a3c0dc86"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5893-Add-VS-Code-CSS-validation-support-2806d73d3650813fb5f1e176360c5b7e)
by [Unito](https://www.unito.io)

---------

Consequences of `@apply` usage may include but are not limited to:
- A strong talking-to
- Receipt of a corrective directive missive
- Upsetting @DrJKL

Co-authored-by: Alexander Brown <drjkl@comfy.org>
2025-10-02 20:25:45 -07:00

96 lines
3.4 KiB
JSON

{
"version": 1.1,
"atDirectives": [
{
"name": "@import",
"description": "Use the `@import` directive to inline CSS files, including Tailwind itself, into your stylesheet.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#import-directive"
}
]
},
{
"name": "@theme",
"description": "Use the `@theme` directive to define custom design tokens like fonts, colors, and breakpoints.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
}
]
},
{
"name": "@layer",
"description": "Use the `@layer` directive inside `@theme` to organize custom styles into different layers like `base`, `components`, and `utilities`.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/theme#layers"
}
]
},
{
"name": "@apply",
"description": "DO NOT USE. IF YOU ARE CAUGHT USING @apply YOU WILL FACE SEVERE CONSEQUENCES.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
}
]
},
{
"name": "@config",
"description": "Use the `@config` directive to load a legacy JavaScript-based Tailwind configuration file.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
}
]
},
{
"name": "@reference",
"description": "Use the `@reference` directive to import theme variables, custom utilities, and custom variants from other files without duplicating CSS.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
}
]
},
{
"name": "@plugin",
"description": "Use the `@plugin` directive to load a legacy JavaScript-based Tailwind plugin.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
}
]
},
{
"name": "@custom-variant",
"description": "Use the `@custom-variant` directive to add a custom variant to your project. Custom variants can be used with utilities like `hover`, `focus`, and responsive breakpoints. Use `@slot` inside the variant to indicate where the utility's styles should be inserted.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/adding-custom-styles#adding-custom-variants"
}
]
},
{
"name": "@utility",
"description": "Use the `@utility` directive to add custom utilities to your project. Custom utilities work with all variants like `hover`, `focus`, and responsive variants. Use `--value()` to create functional utilities that accept arguments.",
"references": [
{
"name": "Tailwind Documentation",
"url": "https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities"
}
]
}
]
}