Comments (10)
Here is a workaround for using LSP directly. You will need to install lsp globally.
yarn global add @tailwindcss/language-server
"languageserver": {
"tailwind-lsp": {
"command": "tailwindcss-language-server",
"args": ["--stdio"],
"filetypes": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"rootPatterns": [
"tailwind.config.js",
"tailwind.config.ts",
"postcss.config.js",
"postcss.config.ts",
"package.json",
"node_modules",
".git"
],
"settings": {
"tailwindCSS": {
"validate": true,
"lint": {
"cssConflict": "warning",
"invalidApply": "error",
"invalidScreen": "error",
"invalidVariant": "error",
"invalidConfigPath": "error",
"invalidTailwindDirective": "error",
"recommendedVariantOrder": "warning"
},
"classAttributes": ["class", "className", "classList", "ngClass"],
"experimental": {}
}
}
}
}
from coc-tailwind-intellisense.
I created a PR for tailwindcss v3 support on the repository side of coc-tailwindcss
. If you are interested, please try it out. iamcco/coc-tailwindcss#70
from coc-tailwind-intellisense.
looks like this breaks with tailwindcss 3.0.0... when I moved the react projects version down to 2.2.19 it worked fine
from coc-tailwind-intellisense.
@kgnugur
Hi, thanks for your work-around, it's indeed enabling code-completion for tailwindcss > 3.0.x.
But i'm also using tailwind in django-html templates, and I'm having some trouble figuring out how to enable it with your config?
- If I set filetype from
htmldjango -> html
the LS picks up and starts code-completion / enhancements for the file, but I lose some handy features fromcoc-htmldjango
.
I've tried the following configuration with no success:
"languageserver": {
"tailwind-lsp": {
"command": "tailwindcss-language-server",
"args": ["--stdio"],
"filetypes": [
"html",
"htmldjango",
"django-html",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"rootPatterns": [
"tailwind.config.js",
"tailwind.config.ts",
"postcss.config.js",
"postcss.config.ts",
"package.json",
"node_modules",
".git"
],
"settings": {
"tailwindCSS": {
"includeLanguages": {
"htmldjango": "html",
"django-html": "html"
},
"validate": true,
"lint": {
"cssConflict": "warning",
"invalidApply": "error",
"invalidScreen": "error",
"invalidVariant": "error",
"invalidConfigPath": "error",
"invalidTailwindDirective": "error",
"recommendedVariantOrder": "warning"
},
"classAttributes": ["class", "className", "classList"],
"experimental": {}
}
}
}
}
from coc-tailwind-intellisense.
Here is a workaround for using LSP directly. You will need to install lsp globally.
yarn global add @tailwindcss/language-server
"languageserver": { "tailwind-lsp": { "command": "tailwindcss-language-server", "args": ["--stdio"], "filetypes": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "rootPatterns": [ "tailwind.config.js", "tailwind.config.ts", "postcss.config.js", "postcss.config.ts", "package.json", "node_modules", ".git" ], "settings": { "tailwindCSS": { "validate": true, "lint": { "cssConflict": "warning", "invalidApply": "error", "invalidScreen": "error", "invalidVariant": "error", "invalidConfigPath": "error", "invalidTailwindDirective": "error", "recommendedVariantOrder": "warning" }, "classAttributes": ["class", "className", "classList", "ngClass"], "experimental": {} } } } }
Dude, this saved me!
from coc-tailwind-intellisense.
Also waiting for fix
from coc-tailwind-intellisense.
I'm switching over to built-in lsp because of this issue. It's a nightmare. Hours of configuration is wasted.
Is there any update on this issue? Thanks.
from coc-tailwind-intellisense.
Me too. The vscode plugin seems to be working fine. Maybe its just a matter of upgrading the tailwind intellisense sub module?
from coc-tailwind-intellisense.
Me too. The vscode plugin seems to be working fine. Maybe its just a matter of upgrading the tailwind intellisense sub module?
Also would love an update to this. 0.7.4 is out now with TailwindCSS v3 support. I even tried to fork this and do an upgrade myself but sadly I've not enough experience in this area.
I did notice the submodule needed updating to as the URL has changed from https://github.com/tailwindcss/intellisense to https://github.com/tailwindlabs/tailwindcss-intellisense as well.
from coc-tailwind-intellisense.
Here is a workaround for using LSP directly. You will need to install lsp globally.
yarn global add @tailwindcss/language-server
"languageserver": { "tailwind-lsp": { "command": "tailwindcss-language-server", "args": ["--stdio"], "filetypes": [ "javascript", "javascriptreact", "typescript", "typescriptreact" ], "rootPatterns": [ "tailwind.config.js", "tailwind.config.ts", "postcss.config.js", "postcss.config.ts", "package.json", "node_modules", ".git" ], "settings": { "tailwindCSS": { "validate": true, "lint": { "cssConflict": "warning", "invalidApply": "error", "invalidScreen": "error", "invalidVariant": "error", "invalidConfigPath": "error", "invalidTailwindDirective": "error", "recommendedVariantOrder": "warning" }, "classAttributes": ["class", "className", "classList", "ngClass"], "experimental": {} } } } }
After installing the package, how do I go about using it? I am currently using nvim-cmp
(for completion) and nvim-lsp-installer
(to manage language servers)
from coc-tailwind-intellisense.
Related Issues (15)
- Not compatible with latest "jit" mode introduced in tailwind HOT 4
- Not working with .svelte file HOT 1
- [Feature request] Compatibility with WindiCSS ?
- Not getting suggestions for handlebars project HOT 1
- Not working in .svelte pug blocks
- Theme :) HOT 3
- CocUpdate - invalid version HOT 2
- update tailwindcss intellisense HOT 1
- doesn't work on react js HOT 4
- Doesn't start when opening file directly from shell HOT 1
- Will this be updated?
- Update from latest tailwindcss-intellisense to allow regex HOT 6
- Any plans to integrate Headwind?
- Merge with the official repo? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from coc-tailwind-intellisense.