u r one of those people who can say 1 line that teaches u a bunch of lessons love u man i loved the way u teaching us...let us explore by our self its the best way of teaching for me...keep it up u r the master❤👌
Hey, What an amazing crash course/tutorial ..respect. I have been deving sites for a while but still have never quite got my head around all the build tool variants properly. (sass/webpack/vite etc) pros and cons. If you need an idea for another tutorial then that could be a good one.... do you have a buy me a coffee link anywhere as the pace of your tuts are perfect for me?
Hi, very glad you enjoyed the tutorial! And your suggestion for a new tutorial is something I've thought about a lot as well. Would definitely make for a good series, and it's something I plan on doing eventually. At the moment I'm busy building a new website to help frontend developers learn to code - so keep an eye out on my channel, because I'll be live in the next 4 - 6 weeks with it. No, no buy my coffee at this stage - would love for you to register on my new site once it's live though!
Hi, I am getting an error `@layer base` is used but no matching `@tailwind base` directive is present.' Looks like it is not able to find the import in the 'base.css' file. But how in your case, it is working fine ? (I am using this in react library)
Hi Kalp, glad you enjoyed it! I'll be releasing a premium Tailwind course in the coming months on my new website. And yup, thanks, I am in the processing of redoing my website. I'll have the new website holding page up shortly, and then am hoping to have my new website live in the next month.
Great tutorial, crystal clear. I have got a question, how to set max width to container class, now it takes 1536px, I want to set this to a no existing container width, like say 1300px. I have tried like: @layer base{ .container { @apply max-w-[1300px] px-3; } } but this getting overridden, can you show this please? thanks in advance :)
Okay, do you only want to customise your container max width? Or do you want to customise the breakpoint that is used for the container? Have a look at the Tailwind docs regarding containers if you're not sure: tailwindcss.com/docs/container#customizing. I would suggest you customise the breakpoint rather than the container. That way you maintain consistency across your entire CSS codebase. Otherwise if you only change the container, then any other CSS you are using for the 2xl breakpoint will still be using 1536px.
Thank you for this tutorial, when I try to run "npm run dev" i get this error: "🚨 Build failed. @parcel/transformer-css: Unknown at rule: @tailwind" I have done everything as you showed, installed the dependencies and called imports in css and tried to run. Can you please tell me how to solve this? Thank you.
Hi Merve, sounds like you have an issue with your CSS setup. Can you remove any CSS on your stylesheet and try to run the build again? If that works, then you at least know where the issue is. Make sure you don't have something silly like a misspelled word on your import statement. It's usually something like that.
@@pixelrocket66 I really could not find the problem, but I moved the files into another folder and re-did the steps. Now It's working. I am looking forward to see this channel grow and new awesome tutorials. Thank you.
@@pixelrocket66 I have another problem, sorry for bothering you too much but I can not find a solution on the internet anywhere. When I import "base/base.css" after importing "tailwindcss/base" I get the following error: @parcel/transformer-css: @import rules must precede all rules aside from @charset and @layer statements /Users/mervekirmizi/Desktop/dnm/src/assets/css/main.css:279:9 278 | --tw-backdrop-sepia: ; > 279 | }@import "base/base.css";.bg-red-500 { > | ^ 280 | --tw-bg-opacity: 1; 281 | background-color: rgb(239 68 68 / var(--tw-bg-opacity)); can you please tell me how to fix this? Sorry that I can not find the error myself, it seems like when tailwind transforms my 5 line css gode to 280 lines it creates the import on the wrong line and the compiler is asking me to fix that. How do I do that? Or is my guess true?
When I tried using the @layer components { .btn{ @apply focus: ring-opacity-50 } } In otherwords, the focus: should be attached to the ring-opacity-50 but never did Rather it gave a space immediately after the focus: And my browser throws it as an error saying `focus:` class does not exist What should I do? Please am stuck
@@pixelrocket66 yes thats the point... My Vscode is giving me the space even if I tried to remove the space, it will still give me that space on saving... It's there anything I need to do on my Vscode to deactivate that extra space
@@estherjonathan_ That sounds weird. Are you running some kind of CSS post processor via PostCSS? Or some kind of code format (like prettier) or linter? Also check your Vscode settings for CSS formatting. I would open your CSS file with notepad, remove the space, save, and restart. If that fixes the issue, then at lease you know the space is the only issue. No idea why Vscode would apply that space though.
@@pixelrocket66 my postcss.config.js file has this module.exports = { plugins: { 'postcss-import': {}, 'tailwindcss/nesting': {}, tailwindcss: {}, autoprefixer: {}, }, } I guess that aforementioned is not the problem? Also, i appreciate every feedback from you... I have uninstall all the formatter and the default settings in my Vscode still having same issues.. Maybe I will change text editor then }
@@estherjonathan_ Sounds very weird. I would try to figure out what's causing this. Why don't you download a different code editor (Sublime Text), and then fix the space, rerun your project. If that fixes it, then at the very least you know where the issue lies. If that doesn't work, then put your code onto a Github repository and send me the link. I'll then be able to have a look if I get the same issue.
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
This channel is underrated
u r one of those people who can say 1 line that teaches u a bunch of lessons love u man i loved the way u teaching us...let us explore by our self its the best way of teaching for me...keep it up u r the master❤👌
Thanks Mehdi!
Hi! I'm new SUBSCRIBER here. Thank you for your effort giving the best tutorial for Tailwind CSS. Im a beginner web Dev.
Hey Jerald, glad you enjoyed it! Keep an eye out on my channel. I'm busy finishing off a new website that will be aimed at new web developers!
Hey, What an amazing crash course/tutorial ..respect.
I have been deving sites for a while but still have never quite got my head around all the build tool variants properly. (sass/webpack/vite etc) pros and cons.
If you need an idea for another tutorial then that could be a good one.... do you have a buy me a coffee link anywhere as the pace of your tuts are perfect for me?
Hi, very glad you enjoyed the tutorial! And your suggestion for a new tutorial is something I've thought about a lot as well. Would definitely make for a good series, and it's something I plan on doing eventually. At the moment I'm busy building a new website to help frontend developers learn to code - so keep an eye out on my channel, because I'll be live in the next 4 - 6 weeks with it. No, no buy my coffee at this stage - would love for you to register on my new site once it's live though!
Thank u very much!
You're welcome!
nicely done
Thanks!
Hi, I am getting an error `@layer base` is used but no matching `@tailwind base` directive is present.' Looks like it is not able to find the import in the 'base.css' file. But how in your case, it is working fine ? (I am using this in react library)
Hey, thank you so much for creating such amazing crash courses btw is your website down??
Hi Kalp, glad you enjoyed it! I'll be releasing a premium Tailwind course in the coming months on my new website. And yup, thanks, I am in the processing of redoing my website. I'll have the new website holding page up shortly, and then am hoping to have my new website live in the next month.
Great tutorial, crystal clear.
I have got a question, how to set max width to container class, now it takes 1536px, I want to set this to a no existing container width, like say 1300px. I have tried like:
@layer base{
.container {
@apply max-w-[1300px] px-3;
}
}
but this getting overridden, can you show this please?
thanks in advance :)
Okay, do you only want to customise your container max width? Or do you want to customise the breakpoint that is used for the container? Have a look at the Tailwind docs regarding containers if you're not sure: tailwindcss.com/docs/container#customizing. I would suggest you customise the breakpoint rather than the container. That way you maintain consistency across your entire CSS codebase. Otherwise if you only change the container, then any other CSS you are using for the 2xl breakpoint will still be using 1536px.
@@pixelrocket66 Thank you for the quick response and clarifying this, I was going in the other way around :)
Thank you for this tutorial, when I try to run "npm run dev" i get this error:
"🚨 Build failed.
@parcel/transformer-css: Unknown at rule: @tailwind"
I have done everything as you showed, installed the dependencies and called imports in css and tried to run. Can you please tell me how to solve this? Thank you.
Hi Merve, sounds like you have an issue with your CSS setup. Can you remove any CSS on your stylesheet and try to run the build again? If that works, then you at least know where the issue is. Make sure you don't have something silly like a misspelled word on your import statement. It's usually something like that.
@@pixelrocket66 I really could not find the problem, but I moved the files into another folder and re-did the steps. Now It's working. I am looking forward to see this channel grow and new awesome tutorials. Thank you.
@@pixelrocket66 I have another problem, sorry for bothering you too much but I can not find a solution on the internet anywhere.
When I import "base/base.css" after importing "tailwindcss/base" I get the following error:
@parcel/transformer-css: @import rules must precede all rules aside from @charset and @layer statements
/Users/mervekirmizi/Desktop/dnm/src/assets/css/main.css:279:9
278 | --tw-backdrop-sepia: ;
> 279 | }@import "base/base.css";.bg-red-500 {
> | ^
280 | --tw-bg-opacity: 1;
281 | background-color: rgb(239 68 68 / var(--tw-bg-opacity));
can you please tell me how to fix this? Sorry that I can not find the error myself, it seems like when tailwind transforms my 5 line css gode to 280 lines it creates the import on the wrong line and the compiler is asking me to fix that. How do I do that? Or is my guess true?
give him his likes and subs..i just subscribed
When I tried using the @layer components {
.btn{
@apply focus: ring-opacity-50
}
}
In otherwords, the focus: should be attached to the ring-opacity-50 but never did
Rather it gave a space immediately after the focus:
And my browser throws it as an error saying `focus:` class does not exist
What should I do?
Please am stuck
Just on first glance, Eshter, looks like you have a space between focus: and ring. So focus: ring should be focus:ring.
@@pixelrocket66 yes thats the point... My Vscode is giving me the space even if I tried to remove the space, it will still give me that space on saving... It's there anything I need to do on my Vscode to deactivate that extra space
@@estherjonathan_ That sounds weird. Are you running some kind of CSS post processor via PostCSS? Or some kind of code format (like prettier) or linter? Also check your Vscode settings for CSS formatting. I would open your CSS file with notepad, remove the space, save, and restart. If that fixes the issue, then at lease you know the space is the only issue. No idea why Vscode would apply that space though.
@@pixelrocket66 my postcss.config.js file has this
module.exports = {
plugins: {
'postcss-import': {},
'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
}
I guess that aforementioned is not the problem?
Also, i appreciate every feedback from you...
I have uninstall all the formatter and the default settings in my Vscode still having same issues..
Maybe I will change text editor then
}
@@estherjonathan_ Sounds very weird. I would try to figure out what's causing this. Why don't you download a different code editor (Sublime Text), and then fix the space, rerun your project. If that fixes it, then at the very least you know where the issue lies. If that doesn't work, then put your code onto a Github repository and send me the link. I'll then be able to have a look if I get the same issue.
New Subscriber 😊
can u make ReactJS crash course with Project pls🙏
Hi Raj, yes, I plan on doing a range of course for React, Nuxt, Next and Vue over the next year.
The Goat
Thanks Stove!
Responsive?
I handle the responsive part for each section, so be sure to check each section for that.
hi I'm learning Tailwind in Persian language
Good luck!
@@pixelrocket66 thank you