Twind Intellisense for VS Code
Intelligent Twind tooling for VS Code
Installation
Install via the Visual Studio Code Marketplace →
Features
- IntelliSense for twind variants and classes within
- Quick Info about
- generated CSS
- used theme value
- the
px value for rem values
- Color preview
- Support for grouping of variants and classes
- Warnings on
- unknown classes
- unknown theme values
- unknown variants
Usage
The twind extension adds highlighting and IntelliSense for Twind classes in JavaScript and TypeScript. It works out of the box when you use VS Code's built-in version of TypeScript.
By default VS Code will not trigger completions when editing "string" content, for example within JSX attribute values. Updating the editor.quickSuggestions setting may improve your experience, particularly when editing Twind classes within JSX:
{
"editor.suggest.showStatusBar": true,
"editor.quickSuggestions": {
"strings": true
}
}
Custom Twind Configuration
If you have a custom twind configuration you need to extract that into an own file. Create a twind.config.{ts,js,cjs,mjs} in the root, src, config, or public folder. Then import it for use with setup. Here is example using a custom plugin:
import { forms, formInput } from '@twind/forms'
/** @type {import('twind').Configuration} */
export default {
plugins: { forms, 'form-input': formInput}
}
// Augment the twind module to add addtional completions
declare module 'twind' {
interface Plugins {
// forms should have been detected from setup – not need to add it
// forms: ''
// We want to add sm and lg modifiers to the form-input
'form-input':
| '' // plain form-input
| 'sm' // form-input-sm
| 'lg' // form-input-lg
}
}
If no twind.config.{ts,js,cjs,mjs} exists and a tailwind.config.{ts,js,cjs,mjs} is found, the compatible values from the tailwind config will be used.
Settings
You can either configure the plugin using VS Code (Extensions - Twind) or configure this plugin using a tsconfig or jsconfig as described here. This requires VS Code 1.53+ and TS 4.1+. Note the VS Code based configuration override the tsconfig or jsconfig configuration.
This extension contributes the following settings:
twind.tags: use different tagged template tags (default: ['tw', 'apply'])twind.attributes: use different attributes (default: ['tw', 'class', 'className'])twind.styles: use different style/styled functions (default: ['style', 'styled'])twind.debug: enable/disable additional debug information (default: false)
This extension adds IntelliSense to any template literal tagged with tw or apply:
import { tw } from 'twind'
tw`
sm:hover:(
bg-black
text-white
)
md:(bg-white hover:text-black)
`
You can enable IntelliSense for other tag names by configuring twind.tags.
Attributes
This extension adds IntelliSense to JSX tw, class, and className attributes:
<span
className="text-purple-400"
tw={`
sm:hover:(
bg-black
text-white
)
md:(bg-white hover:text-black)
`}
>...</span>
`
You can enable IntelliSense for other attributes by configuring twind.attributes
Styles
This extensions adds IntelliSense to style and styled (like @twind/react or @twind/solid)
// Same for style({... })
const Button = styled("button", {
base: `
appearance-none border-none bg-transparent
rounded-full px-2.5
`,
variants: {
variant: {
gray: `
bg-gray-500
hover:bg-gray-600
`,
primary: `
text-white bg-purple-500
hover:bg-purple-600
`,
},
outlined: {
true: `bg-transparent ring-1`,
},
},
matches: [
{
variant: "gray",
outlined: true,
use: `ring-gray-500`,
},
}
})
You can enable IntelliSense for other style like functions by configuring twind.styles.
Debug
Allows to enabling/disabling additional debug information shown in hover and completion popups (default: false) by configuring twind.debug.
Enable
Allows to enabling/disabling the extension (default: true).
Features
Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
Release Notes
See the releases page.
License
MIT
