English | 简体中文
20240816-233530.mp4
This is a VSCode extension that provides intelligent insights for Twind.
Why does the name end with Phoenix
? Because it is rising from the ashes, and one day, it will shine as brightly as it once did.
- Intelligent suggestions
- Clear class information
- Color previews
After installing the extension, simply configure it as follows.
{
// [Important] Specify the presets used in the project, such as `tailwind`, ...
"twind-intellisense.presets": ["tailwind", "typography"]
// ... see below for additional configurations
}
-
twind-intellisense.enabled
: Enable the extension- Type:
boolean
- Default:
true
- Type:
-
twind-intellisense.presets
: Presets used in the project- Type:
Array<'tailwind' | 'phoenix-tailwind@3.4' | 'tailwind-forms' | 'autoprefix' | 'container-queries' | 'line-clamp' | 'radix-ui' | 'typography'>
- Default:
["tailwind"]
Note: If your project uses the
tailwind
preset, be sure to add it.phoenix-tailwind@3.4
corresponds to@phoenix-twind/preset-tailwind
, supports the latesttailwind@3.4
.tailwind
corresponds to@twind/preset-tailwind
, and the others follow similarly. - Type:
-
twind-intellisense.configPath
: Path to the Twind configuration file- Type:
string | undefined
This can be the full path to the configuration file (e.g.,
<...>/twind.config.js
). or the directory containing the configuration file (e.g.,<...>
, which will automatically look fortwind.config.(js|ts)
). If not specified, the extension will look for the configuration file in the workspace folder (e.g.,${workspaceFolder}/twind.config.(js|ts)
) - Type:
-
twind-intellisense.colorPreview
:- Type:
object
- Properties:
enabled
:- Type:
boolean
- Default:
true
- Description: Whether to enable the color preview feature
- Type:
- Example:
{ "twind-intellisense.colorPreview": { "enabled": true } }
- Type:
-
twind-intellisense.classExtraction
: Configuration for class extraction- Type:
object
- Properties:
prefixes
:- Type:
Array<string>
- Description: The prefixes of classes to extract, as regex strings. For example:
"class(Name)?="
- Type:
ignorePrefixes
:- Type:
Array<string>
- Description: The prefixes of classes to ignore, as regex strings. For example:
"css(?=`|\()"
- Type:
- Example:
{ "twind-intellisense.classExtraction": { "prefixes": ["class(Name)?="], "ignorePrefixes": ["css(?=`|()"] } }
- Type:
- HTML
- JavaScript
- JavaScriptReact
- TypeScript
- TypeScriptReact
- Vue
- Svelte
- SolidJS
- ...
MIT License © 2024-PRESENT xlboy