I have a problem.
I'm learning laravel 8 and tailwind CSS.
and as title vscode tailwind CSS Intellisense not working.
My tailwind CSS version is 2.2.15. tailwind.config.js like the photo.
enter image description here
output no error
enter image description here
so what can I do about this issue?
Tailwind CSS IntelliSense extension doesn't work until you have a configuration file in your workspace, as its description clearly states!
You'll be fine even if you're just using the CDN, but you have to create a tailwind.config.js file in your project's root directory, containing the defaults at least:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Also, and since you're working with Laravel, I guess you need to add Blade files to be recognized by the extension through this VSC setting (in settings.json):
"tailwindCSS.includeLanguages": {
"blade": "html",
},
One final note: The content paths are what going to be processed by Tailwind's JIT engine; understanding it is crucial!
Possible Solution
Disable a single VS Code Extension called:
"Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets"
Evidence
Tailwind CSS IntelliSense was not working in my Angular project. I had installed Tailwind CSS using their instructions:
Click here
MY VERSIONS
VS Code: 1.62.3
Tailwind CSS: 3.0.1
Angular: 13.0.3
I disabled the extension, mentioned as my "Possible Solution" above, and Tailwind CSS IntelliSense worked instantly.
Demo of Tailwinds CSS IntelliSense in my Angular project
i had same the issue while working on tailwind with laravel.
unInstalling and reinstalling tailwind intellisense extension solved my problem.
also , dont forget to add the following in the part of your blade file :
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
For me, it seems to be an issue with one of my extensions.
I needed to uninstall the "Emmet Live" extension and install the "Mithril Emmet" extension.
As some other answers have suggested, make sure you also put the following in your settings.json:
"tailwindCSS.emmetCompletions": true,
"editor.inlineSuggest.enabled": true,
"editor.quickSuggestions": {
"strings": true
},
"css.validate": false
Using '' instead of "" might work.
Related
I installed the plugin #tailwindcss/line-clamp, but its not working its not being suggested by intellisense and even when I type in the class manually it doesn't change my styling .
here is my tailwind config :
module.exports = {
content: ['./src/**/*.tsx', './src/**/*.ts'],
plugins: [require('#tailwindcss/forms'), require('#tailwindcss/line-clamp')],
}
btw this a typescript React project .
This same thing happend with me as well. For me I was using tailwind alongside with daisyUI and sometimes the vscode pulgin was working sometimes not.
One thing you can follow, make sure to use the tailwind docs Taiwind Docs and follow the instruction on how to install tailwind for your project as per the framework you are using. Give it a try.
Or if it's not working you can try installing the below extention along side with tailwind extention in vscode.
HTML CSS Support
You can also try to add the below in your settings.json. It worked for me actally.
"editor.quickSuggestions": {
"strings": true
}
For more on this one - Stack Overflow
answered here https://stackoverflow.com/a/72731657/12763140
The extension HTML CSS Support extension is not the correct way to go.you should follow 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.
This is my first time installing and running tailwind CSS. I follow the instructions and did everything accordingly but then it started showing some warnings like below
Can you tell me why I am getting these warnings and anyway for me to fix them? As I am worried that my generated CSS will be missing styles So help is needed to fix it
Also, can I keep the tailwind CSS in watch mode? Please give me the command line or video or explain to me the way to fix it? Thank you in advance!
This warning occurred because you did not use any of the tailwind classes, causing tailwind to suspect that the project config was not implemented correctly.
https://tailwindcss.com/docs/installation
Make sure you don't have repeated properties in your Tailwind config file. After upgrading from v2 to v3, Accidently I had put two content properties. Other than that make sure you have done migration properly.
framework guide: https://tailwindcss.com/docs/installation/framework-guides
upgrade guide: https://tailwindcss.com/docs/upgrade-guide
It's look like you dont have the tailwind config file. Take a look in your root folder if you have. If not you can create one by this command: npx tailwindcss init
Then the tailwind cli will create the tailwind.config.js file. It looks like:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
https://tailwindcss.com/docs/installation
I'm using Tailwind in a Gatsby.js project. My environment is VSCode, using Prettier code formatter.
How do I get rid of these linting error alerts?
Solution for both .css and .scss
At the root level of your project, update or create a dir .vscode with a file settings.json:
Add the following to .vscode/settings.json:
{
"css.validate": false,
"less.validate": false,
"scss.validate": false
}
Install the vscode-stylelint extension
install stylelint-config-standard:
npm i stylelint-config-standard -D
create a stylelint.config.js file at the root level and add:
module.exports = {
extends: ['stylelint-config-recommended'],
rules: {
"at-rule-no-unknown": [
true,
{
ignoreAtRules: [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
"declaration-block-trailing-semicolon": null,
"no-descending-specificity": null,
},
};
restart vsCode
Results:
You get rid of these SASS linting errors when using Tailwind-CSS and keep doing css validation with stylelint.
You can tell VS Code's CSS linter to ignore "Unknown At Rules" (like #tailwind). This will leave the rest of your CSS validation intact:
VS Code -> Command Palette -> Workspace Settings -> Search for: CSS Unknown At Rules
Set to ignore
VS Code can also whitelist specific CSS properties with CSS > Lint: Valid Properties, but it doesn't look like whitelisting specific 'at rules' is supported yet.
Quick Solution for both .css and .scss (NOT RECOMMENDED)
At the root level of your project, update or create a dir .vscode with a file settings.json:
Add the following to .vscode/settings.json:
{
"css.validate": false
}
Results:
You get rid of these SASS linting errors when using Tailwind-CSS but you disable CSS validation.
The other answers are thermonuclear. Even Confucius stopped with a canon...
This is the one that did it for me.
To reproduce: Settings -> search for "invalid tailwind directive", update the value for this rule to "ignore". Voila.
Add this one-line fix in VSCode's settings.json
"scss.lint.unknownAtRules": "ignore"
This way you don't have to disable CSS validation.
If you using VS Code then you can add support for modern and experimental CSS within Visual Studio Code by installing the following plugin to fix the error while using Tailwind CSS directives.
https://marketplace.visualstudio.com/items?itemName=csstools.postcss
So, I've made a migration of a Angular 5 project to Angular 6 (well, more like I did a mix with a regular migration and a new project re-using the files because of a bunch of problems). The project compiles and works nicely as it should.
Bu the Angular 5 version used sass instead of the regular css. That shouldn't be a problem: I did the following updates to allow Angular 6 to work with the scss files.
schematics in angular.json is set with "#schematics/angular:component": { "styleext": "scss" }
stylein angular.jsonis set with "styles": [ "src/styles.scss" ]
All the css files have a scss extension.
All the component have a scss declared instead of the css.
Well... That didn't work. My pages are rendered without style whereas the files seem to be correctly loaded. Did I miss something?
(Angular version is 6.1.10, CLI is 6.0.8)
Update 2
The console does not write anything related to a missing file or else.
The styled elements don't have their style.
In the DevTools the styles are not the sources tab, but they also aren't in it in the Angular 5 version (though they are in the Style Editor tab in Firefox).
You forgot to compile the scss files.
do npm install -g sass
then run sass styles.scss
which will turn/compile scss files to css one.
You cannot link a direct scss files to render styles, it must be compiled first to css.
Problem solved: there were missing dependencies in style and scripts in angular.json.
I have created the angular project in VS Code using the following command.
ng new my-app --style=scss
by following this github link
Now every style sheet that is being created using angular-cli is with extension of .scss instead of .css
Now there is a requirement to check that how Sass is being converted to css because I am new to Sass. I am facing some issues in designing thus it would be nice for me to look at css file.
I have searched in those folder where scss file exists but there I couldn't find css file. Please help
Update
Look at this picture, when I created the component using cli, it created .scss instead of css so I need to look for css file.
I've been able to find a way to view my compiled .scss files as a .css file.
Before I only saw the raw .scss files when inspecting from Chrome.
The trick was setting some flags in the angular.json file so it will tell webpack (what angular-cli uses to build the app) that I want the .scss files served as .css along with a sourcemap of the file:
./angular.json
{
...
"projects": {
"my-prject": { <-- or whatever your project is named
"architect": {
"configurations": {
"production": { // <-- production is default, you might be working w/ custom configurations [development, test, w/e]
...
"sourceMap": true, <-- will serve source maps w/ the file so you can view it in the browser easily
"extractCss": true, <-- actually serve the .css files and not the .scss files
...
}
}
}
}
}
}
Once that is updated, restart the dev server or rebuild your application
then you can go into chrome dev tools and look at find the styles.css file (or whatever you have the file name set to) and view it:
If you are working on local then:
local {
"sourceMap": true,
...
}
Sass in Angular 2 are always converted into Css in run time when you compile and build the project. However if you are using any other environment like Gulp tasks and watches, you can run 'sass --watch input.scss output.css'
As folks have already mentioned, the css is built at runtime. You can still set the result using inspect in chrome or firefox.
It's definitely a requirement to check the generated CSS when you find something wrong and Chrome Inspector can't help! So this is definitely a good question, which is why I'm here.
To summarize, #y_vyshnevska is right that "you may find your css inlined in script tags at the end of head", and he also gave an in-depth link: https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975 on the topic. I put it here in case you neglect it.
It looks not possible to view compiled css files at a runtime.
However, you can do the following trick: angular applies components' styles using <style> attribute. Find the one you need in elements inspector (you can search there using ctrl (or cmd) + f.
After you've found the stylesheet you need, you'll see it's truncated. To see the entire content, click on the style element and select "Store as global variable". After that in console run
copy(Object.values(temp1.sheet.cssRules).map(r => r.cssText).join('\n'))
This will copy all css to your buffer