tailwindlabs / tailwindcss-intellisense Goto Github PK
View Code? Open in Web Editor NEWIntelligent Tailwind CSS tooling for Visual Studio Code
Intelligent Tailwind CSS tooling for Visual Studio Code
Hi there,
Many thanks for this time-saving extension.
Why does it prepend autocompleted classes with a dot although it's not required according to the docs? Is it done on purpose? Could we have an option to disable it?
Current output:
.btn {
@apply .font-bold .py-2 .px-4 .rounded;
}
Expected output:
.btn {
@apply font-bold py-2 px-4 rounded;
}
Thanks!
First of all, thank you so much for this.
It would be cool if not only the linter didn't mark Tailwind's "additions" to CSS as invalid (for instance it doesn't like @apply .some-class
, complaining with [css] identifier expected
), but to go one step further and highlight @apply
and the utilities following it. Similarly, config()
could be highlighted the same way other CSS "functions" such as calc()
are.
I don't know if that's possible, but if it is, it would make this awesome extension even better. :) Thanks!
EDIT: I forgot to mention @tailwind
and @screen
.
I see that this extension is looking for a file with one of these names **/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js
but the name of the config files in node_modules are a bit different.
Could you include those names for projects where there's no config file outside node_modules?
Thanks for the great extension.
For regular HTML files, it works great. However, the extension stops working completely once a file is associated via VSCode to another file type.
For example, Django template files use the regular .html
extension but include special mustache {{ }}
syntax. I'm using another extension to get tag highlighting for these files, as well as emmet expansion. But once I associate this file as "Django HTML" - TailwindCSS Intellisense stops working.
Anything I'm missing?
Performance
vscode-tailwindcss
0.1.16
Darwin x64 18.2.0
1.30.2
bradlc.vscode-tailwindcss-unresponsive.cpuprofile.txt
Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load
Performance
vscode-tailwindcss
0.1.16
Darwin x64 17.7.0
1.32.1
/Users/admin/bradlc.vscode-tailwindcss-unresponsive.cpuprofile.txt
Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load
Looking into extension's configuration files tailwind.tmLanguage.json
seems that .scss
files should be supported. However, @apply
and @tailwind
commands ale not recognized by editor within them (and highligted as an error). Tailwind autocomplete is also not available. .css
files work just fine.
If .scss
files are not currently supported afterall pls consider this a feature request.
{
"activationTimes": {
"startup": true,
"codeLoadingTime": 258,
"activateCallTime": 0,
"activateResolvedTime": 1315,
"activationEvent": "workspaceContains:**/{tailwind,tailwind.config,tailwind-config,.tailwindrc}.js"
}
}
What is that theme in those gifs? I want to get those custom fonts on html tag's properties
Performance
vscode-tailwindcss
0.1.16
Linux x64 4.4.0-142-generic
1.32.1
bradlc.vscode-tailwindcss-unresponsive.cpuprofile.txt
Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load
Performance
vscode-tailwindcss
0.1.16
Darwin x64 18.5.0
1.31.1
/bradlc.vscode-tailwindcss-unresponsive.cpuprofile.txt
Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load
Awesome plugin thank you !
Could it be possible to also support styles written in <style></style>
markup in .vue
files ?
Great job !
First, thank you for this awesome extension.
Could you add support for .leaf files, which are used for templates in Vapor applications?
https://github.com/vapor/leaf
If I rename a .leaf file to .html, everything works as expected.
Thank you 👍
Performance
vscode-tailwindcss
0.1.16
Darwin x64 17.7.0
1.33.1
/Users/h/bradlc.vscode-tailwindcss-unresponsive.cpuprofile.txt
Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load
Is it possible to have this work in the template (html) section of .vue files?
I am looking at the animated screenshots in the extension's description, and I see that as you're typing Tailwind classes in HTML or in CSS (following @apply
) you see the corresponding CSS declaration next to the highlighted class in the IntelliSense popup. It doesn't work for me though:
I should see background-attachment: fixed;
next to bg-fixed
, but there's nothing there.
Is support for pug templates planned?
Second feature request from me. :)
It would be awesome to get the same kind of autocomplete that we get with @apply
but with Tailwind's @screen
directive. It would list all the screens defined in the Tailwind config.
Thanks again!
Hi!
Is there a way to enable the extension for standalone .html files that use cdn version of Tailwind?
Thanks!
Example:
<div class="xl:text-center md:text-left lg:text-right mx-auto"></div>
Would become:
<div class="mx-auto md:text-left lg:text-right xl:text-center"></div>
Class names could be ordered by variant and/or CSS property.
Unfortunately I get no suggesstions since I updated tailwindcss to 1.0.0-beta.3
Hi. I just upgraded my app to Tailwind v1. Followed the migration guides to the letter. And now I'm left without autocompletion in the tw...
(your babel plugin - babel-plugin-tailwind-components).
Can anyone give me any suggestion on how to get them back?
The extension is very picky on when to show suggestions. I have recorded a small demo reproducing the problem. When you write the class name, everything works as expected. If you delete one character at a time it also works as expected. If you remove a whole word using alt+backspace
(in US layout the equivalent is option+delete
) it stops showing the suggestions and it's really hard to invoke it back.
I am loving the plugin. It has really helped me writting tailwind css.
Just a thought I had was I like to write emmet abbrivations.
eg.
div.m-5.p-5
Turns into
<div class="m-5 p-5"></div>
It would be great if while writting emmet code we could gett tailwind suggestions. I understand this might be a difficult thing to implement but I think it would be so awesome.
1.0.0-beta.6 removed the negativeMargin theme key in favor of just using -m-${size} inside the margin key itself. The intellisense shows the default negative margins in the results, since it believes that you are relying on defaults without a negativeMargin key. I'm assuming this is also present in the negative inset values which were also changed in the same release.
Hi! I'm using the Tailwind CDN version so I don't have it installed as a npm package nor have a Tailwind config file. How can I make it work? Thanks!
The default behaviour of the suggestions in TSX is to open when you start typing. For some reason when I enable vscode-tailwindcss
the suggestions open immediately and are missing the props for my React components. On the attached gif I am showing how it automatically opens the suggestions with missing props. Then I hit esc
and then ctrl+space
to open the suggestions again and my props are there.
I think ideally it would auto-open with the props there. Or if an option in the config could be added to disabled the automatic opening.
This extension is the reason I switched to VSCode, and I love it, so thanks for making it. For now I can work around the issue with just a couple extra keystrokes.
hello, i start a project with vue cli ui and add tailwind after that the classes work but the extensions doesn't.
you can find the test project here
Thank you for this awesome plugin!
Reading #1 I already found out why it does not work for me:
I use an ember plugin, which stores tailwind in a particular location and also splits the config file in multiple files.
Do you need the .js to make this work, or would the output location of the compiled css be enough? In this case, if you could make this location configurable that would help me a lot!
The css intellisense plugin works fairly well for me but does not properly detect sm:
, active:
and so on
Possible to update this extension to the recent v.1 release of TailwindCSS?
Performance
vscode-tailwindcss
0.1.16
Linux x64 4.15.0-47-generic
1.33.0
/home/smit/bradlc.vscode-tailwindcss-unresponsive.cpuprofile.txt
Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load
CompletionItem
now has a preselect
property: https://code.visualstudio.com/docs/extensionAPI/vscode-api#CompletionItem
When showing config()
completions it should preselect the Tailwind property that makes the most sense.
In this example, textColors
should be preselected:
.example {
color: config('
Issue Type: Bug
Hi!
I have a Wordpress project, I have the project root in the Wordpress root folder, but Tailwind CSS is installed in the /wp-content/theme/theme-name/ subfolder using Yarn.
I don't have class name suggestions in any file (HTML, PHP, CSS, SCSS) and I'm not sure why. Everything else is working as expected.
Extension version: 0.1.16
VS Code version: Code 1.33.1 (51b0b28134d51361cf996d2f0a1c698247aeabd8, 2019-04-11T08:27:14.102Z)
OS version: Windows_NT x64 10.0.17763
Item | Value |
---|---|
CPUs | Intel(R) Core(TM) i7-3630QM CPU @ 2.40GHz (8 x 2395) |
GPU Status | 2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software rasterization: enabled surface_synchronization: enabled_on video_decode: enabled webgl: enabled webgl2: enabled |
Memory (System) | 23.89GB (12.90GB free) |
Process Argv | |
Screen Reader | no |
VM | 0% |
Performance
vscode-tailwindcss
0.1.16
Linux x64 4.15.0-43-generic
1.30.1
bradlc.vscode-tailwindcss-unresponsive.cpuprofile.txt
Find more details here: https://github.com/Microsoft/vscode/wiki/Explain:-extension-causes-high-cpu-load
Say i need some variables on the prop className on React. I would want to use a es6 literal string
<div className={`font-bold text-sm text-gray-600 hover:text-white ${className}`} />
The plugin doesn't show any suggestions, even with Ctrl+Space
. But it works just fine with
<div className="font-bold text-sm text-gray-600 hover:text-white" />
Related to color parsing I think
At the moment there is no tailwind IntelliSense plugin that supports .edge files which are used by AdonisJS. Please, could you add this?
Hey there, this looks awesome, I saw it from you posting it in the Tailwind slack!
So far I'm unable to get it working. In my case, my tailwind.js is in web/themes/custom/theme/tailwind.js
and I'm testing using various filename.html.twig
files inside web/themes/custom/theme/templates
and it just doesn't seem to be doing anything. I don't see any autocomplete popup when typing class names.
I tried renaming the file to filename.twig
or even filename.html
(even though Twig seems to be supported, looking at https://github.com/bradlc/vscode-tailwindcss/blob/master/src/extension.ts#L18) just in case and that didn't help. None of them give me any kind of autocomplete for classes.
Any thoughts on what I could be missing? Or any info I could provide to help debug?
Thanks!
Performance
vscode-tailwindcss
0.1.16
Linux x64 4.18.0-16-generic
1.32.3
When using tailwind and files with a .njk extension, the suggestions to do not activate. I do see nunjucks in the source files, so I am unsure if this is intended to be functional or a work in progress.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.