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
Related
I am putting Tailwind in an Angular project. I have what I think is the most standard configuration (default one, only changed the colors) :
tailwind.config.js
module.exports = {
content: [
join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
...createGlobPatternsForDependencies(__dirname),
],
theme: {
[...]
},
plugins: [],
}
Yet, I face problems when I use a CSS class for the first time. For example mt-10.
It seems that tailwind uses the glob pattern to detect the used css properties and create a CSS on the flight when the server starts. Is that correct ?
If I understand it correctly, it seems to make sense in order to avoid having a huge CSS file with tons of properties that are not used.
But it means that if I don't use this class at the moment I start the server, then it won't be available after a live reload. If I want to use a css class for the first time, it seems that I have to restart the server to have it detected before being able to use it, which is irritating.
Is it possible to deactivate this behavior in development ? It seems to me that it should be possible to build the huge CSS once for all in dev. Is there an option for that ?
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.
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.
I'm building a Next JS website and running Tailwind with JIT. This is my tailwind.config.js:
module.exports = {
mode: "jit",
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {},
extend: {},
plugins: [],
};
Problem is that every time I write new code I have to restart my server and run 'npm run dev' because it's not updating my CSS on http://localhost:3000/.
I also get a warning when I run my server:
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
Any ideas what might be causing this?
Thanks!
Since JIT mode generates your CSS on-demand by scanning your template files, it’s crucial that you configure the purge option in your tailwind.config.js file with all of your template paths, otherwise, your CSS will be empty. replace your purge entry with the following:
purge: ["./public/**/*.html", "./src/**/*.{js,jsx,ts,tsx,vue}"],
Check out this https://tailwindcss.com/docs/just-in-time-mode#styles-don-t-update-when-saving-content-files
You can also add TAILWIND_MODE=watch to your .env file.
I hope it's work because when i delete this, i am also facing same error.
And this warning is fine. It just a message
I had the same issue,
After removing all inline tailwind classes and put them in CSS files with #apply it gets to work well.
Maybe tailwind compiles CSS before Next server renders components.
fixed this, just edit the 'purge' property in your tailwind.config.js file a little by adding the correct path like this
'./public//*.html',
'./src//*.{js,jsx,ts,tsx,vue}',
and you're good to go.
in Nuxtjs, I added:
#import url('tailwindcss/dist/tailwind.min.css');
in to file: ~/assets/css/tailwind.css
Check your CSS, tailwind can die if you have #charset "UTF-8"; in CSS file
In my case tailwind wasn't the problem - it turns out one of my components had a memory leak due to a timer.
Test tailwind on a completely separate page/component and see if the hot-refresh works. If it works on one page and not another - you most likely have a memory leak.
Try removing the brackets from your purge links. That's what fixed it for me.
from this:
purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"]
to this:
purge: ["./pages/**/*.js,ts,jsx,tsx", "./components/**/*.js,ts,jsx,tsx"]
I'm trying to style my FullCalendar according to technique 2 as described in this documentation. It says I should use PostCSS with postcss-custom-properties and postcss-calc.
My project uses Parcel for bundling and not WebPack like FullCalendar do in their examples, but from my understanding, using PostCSS in Parcel should just be plug-and-play by including a postcss.config.js file, so I figured it shouldn't be a huge issue. Here's what that file looks like:
module.exports = {
plugins: [
require('autoprefixer')({
"grid": true
}),
require('postcss-custom-properties')({
preserve: false,
importFrom: [
'src/style/fullcalendar-vars.css'
]
}),
require('postcss-postcss-calc')
]
};
So I have a file src/style/fullcalendar-vars.css. For the purpose of testing, it looks like this:
:root {
--fc-button-bg-color: red;
}
But nothing changes. When I look in the dev tools, there are no CSS variables set. Did I miss something?
I don't know if I can give you more information, I can't share a Stackblitz or anything else afaik, because the proplem lies in the building process. But I can link to the github repository where I am right now so you can look in other files and see what can be wrong https://github.com/WestCoastJitterbugsOrg/Personalized-Calendar/tree/c7633401cb1bb50488e11d0d306cb11333961f2d
Thank you!
I think the issue was that I used scss for everything else. A much simpler solution was to change the file extension of fullcalendar-vars.css to scss and import it in main.scss. No hassle, everything works like a charm! Finally I can have my pretty bright red buttons ;)