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
> [Tailwind CSS](https://tailwindcss.com/) class name completion for VS Code
3
+
Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.
4
4
5
-
**[Get it from the VS Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
8
8
9
-
## Requirements
10
-
11
-
This extension requires:
12
-
- a `tailwind.config.js` file to be [present in your project folder](https://github.com/bradlc/vscode-tailwindcss/blob/master/package.json#L38). You can create it with `npx tailwind init`.
13
-
-`tailwindcss` to be installed (present in project `node_modules/`)
9
+
In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation/#1-install-tailwind-via-npm) and a [Tailwind config file](https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional) named `tailwind.config.js` or `tailwind.js` in your workspace.
14
10
15
11
## Features
16
12
17
-
Tailwind CSS IntelliSense uses your projects Tailwind installation and configuration to provide suggestions as you type.
18
-
19
-
It also includes features that improve the overall Tailwind experience, including improved syntax highlighting, and CSS previews.
20
-
21
-
### HTML (including Vue, JSX, PHP etc.)
22
-
23
-
-[Class name suggestions, including support for Emmet syntax](#class-name-suggestions-including-support-for-emmet-syntax)
24
-
- Suggestions include color previews where applicable, for example for text and background colors
25
-
- They also include a preview of the actual CSS for that class name
26
-
-[CSS preview when hovering over class names](#css-preview-when-hovering-over-class-names)
27
-
28
-
### CSS
29
-
30
-
-[Suggestions when using `@apply` and config helpers](#suggestions-when-using-apply-and-config)
31
-
- Suggestions when using the `@screen` directive
32
-
- Suggestions when using the `@variants` directive
33
-
-[Improves syntax highlighting when using `@apply` and config helpers](#improves-syntax-highlighting-when-using-apply-and-config-helpers)
34
-
35
-
## Examples
13
+
### Autocomplete
36
14
37
-
#### Class name suggestions, including support for Emmet syntax
15
+
Intelligent suggestions for class names, as well as [CSS functions and directives](https://tailwindcss.com/docs/functions-and-directives/).
Provides syntax definitions so that Tailwind features are highlighted correctly.
58
34
59
35
## Settings
60
36
@@ -70,7 +46,7 @@ This setting allows you to add additional language support. The key of each entr
70
46
}
71
47
```
72
48
73
-
### `tailwindcss.emmetCompletions`
49
+
### `tailwindCSS.emmetCompletions`
74
50
75
51
Enable completions when using [Emmet](https://emmet.io/)-style syntax, for example `div.bg-red-500.uppercase`. **Default: `false`**
76
52
@@ -79,3 +55,43 @@ Enable completions when using [Emmet](https://emmet.io/)-style syntax, for examp
79
55
"tailwindCSS.emmetCompletions": true
80
56
}
81
57
```
58
+
59
+
### `tailwindCSS.validate`
60
+
61
+
Enable linting. Rules can be configured individually using the `tailwindcss.lint` settings:
62
+
63
+
-`ignore`: disable lint rule entirely
64
+
-`warning`: rule violations will be considered "warnings," typically represented by a yellow underline
65
+
-`error`: rule violations will be considered "errors," typically represented by a red underline
66
+
67
+
#### `tailwindCSS.lint.invalidScreen`
68
+
69
+
Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen). **Default: `error`**
70
+
71
+
#### `tailwindCSS.lint.invalidVariant`
72
+
73
+
Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants). **Default: `error`**
74
+
75
+
#### `tailwindCSS.lint.invalidTailwindDirective`
76
+
77
+
Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind). **Default: `error`**
78
+
79
+
#### `tailwindCSS.lint.invalidApply`
80
+
81
+
Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply). **Default: `error`**
82
+
83
+
#### `tailwindCSS.lint.invalidConfigPath`
84
+
85
+
Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme). **Default: `error`**
86
+
87
+
#### `tailwindCSS.lint.cssConflict`
88
+
89
+
Class names on the same HTML element which apply the same CSS property or properties. **Default: `warning`**
90
+
91
+
## Troubleshooting
92
+
93
+
If you’re having issues getting the IntelliSense features to activate, there are a few things you can check:
94
+
95
+
- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.js` or `tailwind.js`. Check out the Tailwind documentation for details on [creating a config file](https://tailwindcss.com/docs/installation/#3-create-your-tailwind-config-file-optional).
96
+
- Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`. Tailwind CSS IntelliSense does not currently support Yarn Plug'n'Play.
97
+
- If you installed `tailwindcss` or created your config file while your project was already open in Visual Studio Code you may need to reload the editor. You can either restart VS Code entirely, or use the `Developer: Reload Window` command which can be found in the command palette.
"markdownDescription": "Enable features in languages that are not supported by default. Add a mapping here between the new language and an already supported language.\n E.g.: `{\"plaintext\": \"html\"}`"
73
+
},
74
+
"tailwindCSS.validate": {
75
+
"type": "boolean",
76
+
"default": true,
77
+
"markdownDescription": "Enable linting",
78
+
"scope": "language-overridable"
79
+
},
80
+
"tailwindCSS.lint.cssConflict": {
81
+
"type": "string",
82
+
"enum": [
83
+
"ignore",
84
+
"warning",
85
+
"error"
86
+
],
87
+
"default": "warning",
88
+
"markdownDescription": "Class names on the same HTML element which apply the same CSS property or properties",
89
+
"scope": "language-overridable"
90
+
},
91
+
"tailwindCSS.lint.invalidApply": {
92
+
"type": "string",
93
+
"enum": [
94
+
"ignore",
95
+
"warning",
96
+
"error"
97
+
],
98
+
"default": "error",
99
+
"markdownDescription": "Unsupported use of the [`@apply` directive](https://tailwindcss.com/docs/functions-and-directives/#apply)",
100
+
"scope": "language-overridable"
101
+
},
102
+
"tailwindCSS.lint.invalidScreen": {
103
+
"type": "string",
104
+
"enum": [
105
+
"ignore",
106
+
"warning",
107
+
"error"
108
+
],
109
+
"default": "error",
110
+
"markdownDescription": "Unknown screen name used with the [`@screen` directive](https://tailwindcss.com/docs/functions-and-directives/#screen)",
111
+
"scope": "language-overridable"
112
+
},
113
+
"tailwindCSS.lint.invalidVariant": {
114
+
"type": "string",
115
+
"enum": [
116
+
"ignore",
117
+
"warning",
118
+
"error"
119
+
],
120
+
"default": "error",
121
+
"markdownDescription": "Unknown variant name used with the [`@variants` directive](https://tailwindcss.com/docs/functions-and-directives/#variants)",
122
+
"scope": "language-overridable"
123
+
},
124
+
"tailwindCSS.lint.invalidConfigPath": {
125
+
"type": "string",
126
+
"enum": [
127
+
"ignore",
128
+
"warning",
129
+
"error"
130
+
],
131
+
"default": "error",
132
+
"markdownDescription": "Unknown or invalid path used with the [`theme` helper](https://tailwindcss.com/docs/functions-and-directives/#theme)",
133
+
"scope": "language-overridable"
134
+
},
135
+
"tailwindCSS.lint.invalidTailwindDirective": {
136
+
"type": "string",
137
+
"enum": [
138
+
"ignore",
139
+
"warning",
140
+
"error"
141
+
],
142
+
"default": "error",
143
+
"markdownDescription": "Unknown value used with the [`@tailwind` directive](https://tailwindcss.com/docs/functions-and-directives/#tailwind)",
0 commit comments