Skip to content

Add Tailwind CSS language mode #518

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 27 commits into from
Apr 13, 2022
Merged
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
789448b
Use `esbuild`
bradlc Feb 14, 2022
b9f9608
Merge branch 'master' into esbuild
bradlc Mar 4, 2022
f36af9e
Replace direct `eval`
bradlc Mar 4, 2022
0a6c027
add initial language mode
bradlc Apr 11, 2022
db77850
Merge branch 'master' into esbuild
bradlc Apr 11, 2022
7ab9e8b
Update capabilities, add rename provider
bradlc Apr 11, 2022
7d55922
Update vscode types
bradlc Apr 11, 2022
23634c9
Add completion middleware to match built-in CSS provider
bradlc Apr 11, 2022
606b0d2
Update language config to match built-in CSS language
bradlc Apr 11, 2022
a3051b9
Add folding region completion provider
bradlc Apr 11, 2022
70a3bf2
Add stylesheet cache
bradlc Apr 11, 2022
e246893
Add log and error handling
bradlc Apr 11, 2022
adabf27
Update settings handling, debounce validation
bradlc Apr 11, 2022
456e6cc
Fix response flakiness by always augmenting CSS
bradlc Apr 11, 2022
b48c86a
Respect folding range limit
bradlc Apr 12, 2022
23180e7
Use uncommon symbol as `@media` placeholder
bradlc Apr 12, 2022
cb67219
Update readme
bradlc Apr 12, 2022
6cffd7a
Use `esbuild` for language server build
bradlc Apr 12, 2022
d3d4b66
Add `theme()` completion item
bradlc Apr 12, 2022
db963f4
Avoid errors when using `@media screen()`
bradlc Apr 12, 2022
b828a06
Update readme
bradlc Apr 12, 2022
f223d91
Merge branch 'esbuild' into language-mode
bradlc Apr 13, 2022
1a6a34d
Add CSS server to build script
bradlc Apr 13, 2022
3d58cb6
Rename language mode server file in prod
bradlc Apr 13, 2022
95bccbe
Update VS Code `engines` and types versions
bradlc Apr 13, 2022
282e084
Update grammar
bradlc Apr 13, 2022
f2c4bc5
Merge branch 'master' into language-mode
bradlc Apr 13, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update readme
  • Loading branch information
bradlc committed Apr 12, 2022
commit b828a0633b782c9fd42bcbb6f91eaac0d9947180
16 changes: 5 additions & 11 deletions packages/vscode-tailwindcss/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,30 +28,24 @@ See the complete CSS for a Tailwind class name by hovering over it.

<img src="https://raw.githubusercontent.com/bradlc/vscode-tailwindcss/master/packages/vscode-tailwindcss/.github/hover.png" alt="" />

### CSS Syntax Highlighting

Provides syntax definitions so that Tailwind features are highlighted correctly.

### Tailwind CSS Language Mode

An alternative to VS Code's built-in CSS language mode which maintains full CSS IntelliSense support even when using Tailwind-specific at-rules.
An alternative to VS Code's built-in CSS language mode which maintains full CSS IntelliSense support even when using Tailwind-specific at-rules. Syntax definitions are also provided so that Tailwind-specific syntax is highlighted correctly in all CSS contexts.

## Recommended VS Code Settings

VS Code has built-in CSS validation which may display errors when using Tailwind-specific at-rules, such as `@apply`. You can disable this with the `css.validate` setting:

```
"css.validate": false
```
### `files.associations`

Alternatively, you can configure VS Code to use the provided Tailwind CSS language mode by default for all CSS files:
Use the `files.associations` setting to tell VS Code to always open `.css` files in Tailwind CSS mode:

```
"files.associations": {
"*.css": "tailwindcss"
}
```

### `editor.quickSuggestions`

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:

```
Expand Down