So the description of the plugin is that it'll display suggestions of classes when am working on the markup, but it doesn't. I've reloaded the plugin countless times. I even restarted vscode and eventually re-installed it.
Of course, I did the npm install tailwind and other utilities needed... I even have my tailwind.config.js file in my project if that helps to answer my question. Thank you.
I'm using tailwindcss in a react app. Tailwindcss Intellisense plugin was not working in my VSCode but then i installed HTML CSS Support extension and now i am getting suggestions of classes.
HTML CSS Support
Its actually a pretty simple fix. open your settings.json file then add this to get the intellisense working on all files
"tailwindCSS.includeLanguages": {
"html": "html",
"javascript": "javascript",
"css": "css"
},
"editor.quickSuggestions": {
"strings": true
}
To fix this issue try using ctrl + space
This is the easiest way I found to get Tailwind IntelliSense to work with .js files to React. You need to do this every time you are adding a new class but it's quicker than checking the documentation every time.
Credit: Reddit
What helped me was to check whether the plugin had any issue loading. You can do this by checking the output view:
CTRL + SHIFT + P to bring up the command palette
Search for "Output: Focus on Output View"
In the Output View, search for tailwindcss-intellisense
For me the error was
Failed to initialise: ReferenceError: defaultTheme is not defined - I was missing a require for the defaultTheme.
for me..
I installed 'IntelliSense for CSS class names in HTML', 'HTML CSS Support', 'CSS Peek' all together with reinstalling..
It works now.
To anyone still facing this problem, I found that the tailwind extension doesn't recognize your tailwind.config.js file if it's untracked (not added to source control). Once I added the file and did git commit, the extension worked.
if you're using nuxt/tailwind module be sure to init tailwind.config.js as doc says.
npx tailwindcss init
then restart the vs-code. it should automatically be active.
I'm using tailwind + create-react-app + typescript, I solved it by changing the extension setting "Tailwind CSS: Include Languages", to {"plaintext": "ts"}.
I don't know why it didn't work in the first place, it was working for my other projects.
Just go to the
Tailwind CSS IntelliSense
extension in Vs code
and install the old version and reload it.
It works.
This is the solution for autosuggestion on typing. So you don't need to use space+ctrl or just space. In case anyone needs it.
editor.suggest.snippetsPreventQuickSuggestions: false
Without pressing ctrl-space, I just need to press space and the classes will come out.
I am using Tailwindcss with Django.
Facing the same issue where Tailwindcss IntelliSense plugin is already installed and autocomplete wasn't working.
Finally I got the perfect solution.
For most projects (and to take advantage of Tailwind’s customization features), you’ll want to install Tailwind and its peer-dependencies via npm.
npm install -D tailwindcss#latest postcss#latest autoprefixer#latest
In my case the postcss and autoprefixer was not installed.
You can run the above command and npm will take care of it if you have Tailwindcss already installed.
Also don't forget to put these lines in your settings.json in VSCode (Recommended VS Code Settings for Tailwind CSS IntelliSense):
// VS Code has built-in CSS validation which may display errors when using Tailwind-specific syntax, such as #apply. You can disable this with the css.validate setting
"css.validate": false,
// 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:
"editor.quickSuggestions": {
"strings": true
},
// This setting allows you to add additional language support. The key of each entry is the new language ID and the value is any one of the extensions built-in languages, depending on how you want the new language to be treated (e.g. html, css, or javascript):
"tailwindCSS.includeLanguages": {
"plaintext": "django-html"
},
I disabled and re-enabled the plugin. Wait a bit for it to re-indexing. And it works.
I fixed it by creating a tailwind.config.js file with the help of npx tailwindcss init command. I was following tutorials of net ninja (youtube channel) and he mentioned this solution.
If you are using tailwind with react, typescript, javascript, styled-components, and twin-macro, you have to add classRegEx manually to get the IntelliSense
To achieve this edit the user settings as below
"tailwindCSS.experimental.classRegex": [
"tw`([^`]*)",
["classnames\\(([^)]*)\\)", "'([^']*)'"]
],
For more information and to see what classRegEx should use with other techs read this
This setting is good working for react.js application
{
"tailwindCSS.experimental.classRegex": [
"class:\\s*\"([^\"]*)\""
],
"emmet.triggerExpansionOnTab": true,
"tailwindCSS.emmetCompletions": true,
"editor.quickSuggestions": {
"strings": true
}
}
Update VS Code
I had the same issue I just fixed it by updating VS Code.
At first, write in your project npm install tailwindcss postcss-cli autoprefixer, Then write in your terminal npx tailwind init, at last write npm tailwind"postcss.config.js and then write in the file:
module.export = { plugins: [require('tailwindcss'), require('autoprefixer')]};
last step u can build your tailwindcss in packagein accordance with the package.json.
For more info u can visited this link.
Running Tailwind CSS: Show Output from View -> Command Palette (or Ctrl + Shift + P), as suggested here, unveils that the "Tailwind CSS IntelliSense" plugin is looking for a proper npm installation of the module tailwindcss.
Solution: We can therefore fix the issue by simply running
npm install tailwindcss
within our project directory.
Make sure that you open the project from its root folder. I happened to me that there were multiple package.json files in the a different folder, the VS code plugin will be confused with tailwindcss path.
Just open the Explorer view and you should see one and only one package.json file and tailwindcss is listed as the dependencies.
For React project with .tsx file, adding this works for me.
// .vscode/settings.json
{
"tailwindCSS.includeLanguages": {
"typescriptreact": "html"
}
}
Credit: https://github.com/tailwindlabs/tailwindcss-intellisense/issues/72#issuecomment-674386396
for me helps installed plugin IntelliSense for CSS class names in HTML
Rails erb - Custom class name completion contexts
Add to settings (ctrl + shift + p)
"tailwindCSS.experimental.classRegex": [
"class:\\s*\"([^\"]*)\""
]
See github issue reply
I did Smit #Barmase solution but also added "plaintext" and "tsx".
Now everything works when I hit space after previous class.
In my case, the code completion not working without the start tag >.
Not work:
<div class=""
Work:
<div class="">
My best practice
Strictly speaking, it doesn't work without the start tag >. But My best practice is to write the closing tag and then write the class.
First write:
<div class=""></div>
Second write:
<div class="w-10"></div>
I solved the problem only by deleting the space between the equal sign and and quote.
So instead of writing className= "tailwind classes..." write className="tailwind classes...". I hope that this answer will help.
Had the same issue with Intellisense, the output in VSCode for the "TailWind CSS IntelliSense" had
[Error - 1:36:36 PM] Tailwind CSS: Cannot set property 'parent' of undefined
TypeError: Cannot set property 'parent' of undefined
This seemed to be coming from the postcss-nested plugin, however after reading a few other SO posts on the similar issue it actually came down to my setup.
The main project folder was failing to parse a file that existed inside a sub-project (td;lr. using a wordpress theme git repo that is build with the template as the root).
Since the original setup to process the TailWind wasn't needed, I noticed that the root project was TailWind v3, while the sub-project was TailWind v2. After removing the base package.json dependancies Intellisense kicked in picked up the [sub-project] tailwind config, postcss and tailwind version.
Not sure if that might be similar to your setup, but what is suggested is checking the package versions, and that your tailwind config files (if any) are setup right.
The moment you fix it, you should immediately be able to see in the Output tab for "TailWind CSS IntelliSense" something similar to the following....
Found Tailwind CSS config file: /.../tailwind.config.js
Loaded postcss v8.3.0: /.../node_modules/postcss
Loaded tailwindcss v2.2.0: /..../node_modules/tailwindcss
Hope there's something you can take away from this. :)
The extension HTML CSS Support extension is not the correct way to go. As specified in the official installation section of the detail page in the extension page in VSC.
In order for the extension to activate you must have tailwindcss installed and a Tailwind config file named tailwind.config.js or tailwind.config.cjs in your workspace.
so adding a file (even empty) named tailwind.config.js or tailwind.config.cjs at the root of your app will make it work.
My issue was with the tailwind.config.js. Since I followed the Tailwind installation step by step, I put the content as
content: ["./src/**/*.{html,js}"]
While I had no src folder, rather my html file was at the root. So I changed it to below and the IntelliSense started working.
content: ["/*.{html,js}"]
So just in case someone is making this silly mistake like me :)
How to get it working with denoland's Fresh framework
Check that the extension is not loading by opening the OUTPUT tab of the console and verifying that the dropdown menu has an entry for Tailwind CSS IntelliSense.
If it does not figure there you need to make a blank tailwind.config.js file at the root directory.
This file is completely redundant with Deno, but required by the extension.
If it still does not help, try other methods shown in this thread. With the extension loading latest version of it does work on with setup.
I'm trying out some very basic Ionic tutorials from Ionic website (Ionic Tutorial), and i want to be able to view and modify scss from dev tools.
The app functions correctly, css classes i've added in scss files work correctly as well but i see a main.css file instead of the foo.css from which it was compiled. I can even view typescript files on dev tools and debug, which means source map for js->ts is working. It's the css-> scss that's not working.
I can see these files on www/build
main.js
main.map.js
main.css
main.map.css
Which means the source map is generated correctly.
I have also enabled css source maps in chrome from
- DevTools -> Settings ->Sources -> Enable CSS source maps
I would mark this as duplicate but it seems like i cannot. Answer can be found on this SO postenter link description here. Basically,
You'll need to extend your sass.config.js file, by default source mapping for sass is disabled.
config/sass.config.js:
module.exports = {
sourceMap: true,
}
package.json:
"config": {
"ionic_sass": "./config/sass.config.js",
}
I can verify that this works.
I'm learning Aurelia via the TypeScript / ASP.NET Core skeleton navigation app. Everything runs fine in its default state. To test the exported production bundle, I run the Gulp Export task, then publish the app via Visual Studio project publish to a local folder, then replace the published wwwroot folder with the wwwroot folder from within the "export" folder, then use dotnet from the command line to run the app.
Things break if I have any source modules in a subdirectory. For example, I moved the welcome.ts/html component files into "/src/Pages" and adjusted its route moduleId in app.ts accordingly to "./pages/welcome". The unbundled app then still runs up fine, but when I try the exported version, I get a request being made by SystemJS to http://localhost:5000/dist/pages/welcome.js which 404s (as you'd expect).
I can see the contents of the welcome component in the app-build.js file, and the config.js file within the export folder contains the expected file paths, i.e. it has "Pages/welcome...".
I have read this seemingly similar issue:
https://github.com/aurelia/bundler/issues/131
But setting depCache to false made no difference in my case. Why is SystemJS trying to load this module separately from outside of the bundle?
I was able to reproduce this error locally.
Presuming that you have a Windows environment, it will be a case-sensitivity issue.
After renaming [P]ages folder to [p]ages, bundled version works as expected.
On the filesystem there is a [P]ages/welcome.js viewmodel, but [p]ages/welcome has been defined as moduleId.
Unbundled mode: Windows filesystem is case-insensitive, which behaviour can be misleading by loading [P]ages/welcome.js correctly.
Bundled mode:
Based on file path, bundling process embeds[P]ages/welcome.js as [P]ages/welcome module.
But, according to the route config, SystemJS will be looking for [p]ages/welcome module within app-build.js.
My recommendation would be to use lowercase folder/filenames whenever it's possible.
I have a project with coffeescript and brunch.
There is following config for files concatenation:
files:
javascripts:
joinTo:
'js/app.js': /^app(\/|\\)(?!templates)/
'js/vendor.js': /^vendor/
templates:
joinTo:
'js/templates.js': /^app\/templates/
When I just clone this project and build it, all works fine - I see all my source files in developer console.
Then I do some harmless modifications in any file in project (like adding a useless variable declaration or duplicating "return" statement), and strange things happens:
A builded code is valid and works fine, but there are no source maps available.
If I disable source maps at all, I still can see some wrong behaviour:
And in the same time, origin build file is absolutely valid (can't post third link, sorry): it has '//# sourceMappingURL=app.js.map' line in the end, without any trailing spaces or whatever else.
Any ideas what can this be and how to solve this problem?
I've found where I was wrong.
First. About broken files loaded by browser.
As I noticed in comment above, the problem was in environment. My files are served by nginx, running inside Vagrant VM - and it seems, that sync between local files and VM was broken.
My solution was following:
disable caching in VirtualBox (machine settings -> tab 'Storage' -> select controller -> uncheck 'Use Host I/O cache');
edit nginx config and set 'sendfile off' option in 'http' section.
Not sure this is absolutely right solution, but after this correct files was loaded by browser.
Second. About still absent maps for app.js in Chrome.
It's just my inattention. I'm using Webstorm, and periodically it proposes to enable watcher for coffeescript files I open. And if you agree (what I've accidentally did missing 'Agree' button instead of 'Dismiss'), it will compile that file at his own, creating .map and .js files alongside origin .coffee - of course, no matter to your brunch or whatever else settings. These additional files are displayed as subfolders of .coffee file, so it is very likely that you do not notice them. And exactly these files Chrome does not like. Until you remove them all, Chrome will not display any source maps, no matter to .map file created by brunch - while for FF it's not a problem.