Tailwind v2 now supports variants (responsive, hover, focus, active) on the @apply rule. You can define it all at once instead of creating styles for each variant. Great feature!
Instead of using @apply directive in tailwind.css file , I want to use it in any .scss file. For example, in react whenever I create a component, I create a folder and an inside it I create a index.tsx file and a .scss file. I want to use @apply directive in that .scss file. How can I achieve that ??
Wow, I was epicing trying to figure out why I couldn't "cascade" additional styles on top of my own class.. turns out I needed to have my classes above @utilities! What a relief, thank you! Great video, very clear and helpful, looking forward to checking out more. Side question, I have my css named index.css, should it be tailwind.css for any reason? Thanks!
Confirm that the order of the personalized variants declaration is the following: responsive, hover, focus, active. You likely set 'active' before some other one.
I can't tell if you're being sarcastic. Bootstrap is a totally separate library which is more opinionated and less customizable. Tailwind is not a framework but a library that can be used in frameworks like Next or Angular, or just in an otherwise vanilla JS project
4:55 I using Nuxt.js with Tailwind, if i put the .btn css block between @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; , i will get "@import must precede all other statements (besides @charset)" from postcss-loader. Any idea how to solve this?
@@davidliendo9677 You're welcome, also ctrl+shift+L which will select every occurrence of a selection , vscode has a lot of shortcuts that will make your life easier
Tailwind v2 now supports variants (responsive, hover, focus, active) on the @apply rule. You can define it all at once instead of creating styles for each variant. Great feature!
Instead of using @apply directive in tailwind.css file , I want to use it in any .scss file.
For example, in react whenever I create a component, I create a folder and an inside it I create a index.tsx file and a .scss file. I want to use @apply directive in that .scss file. How can I achieve that ??
Wow, I was epicing trying to figure out why I couldn't "cascade" additional styles on top of my own class.. turns out I needed to have my classes above @utilities! What a relief, thank you! Great video, very clear and helpful, looking forward to checking out more.
Side question, I have my css named index.css, should it be tailwind.css for any reason?
Thanks!
Nice! TQVM!!
not working for me, "active" yet being ignored.
Confirm that the order of the personalized variants declaration is the following: responsive, hover, focus, active. You likely set 'active' before some other one.
It like building Bootstrap using TailwindCSS, Thanks for this awesome framework
library
I can't tell if you're being sarcastic. Bootstrap is a totally separate library which is more opinionated and less customizable. Tailwind is not a framework but a library that can be used in frameworks like Next or Angular, or just in an otherwise vanilla JS project
vary useful!
My vscode marked @apply as an error, how to solve it???
this helped me stackoverflow.com/questions/47607602/how-to-add-a-tailwind-css-rule-to-css-checker
4:55 I using Nuxt.js with Tailwind, if i put the .btn css block between @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; , i will get "@import must precede all other statements (besides @charset)" from postcss-loader. Any idea how to solve this?
Put your btn in a separate file and import it or switch to the "@tailwind components" syntax instead of the import syntax 👍
@@AdamWathan thanks
Modern Next js supports putting tailwind into globals.css like this:
@tailwind base;
@tailwind components;
@tailwind utilities;
How did he change the name of multiple classes at once?
ctrl+d or cmd+d
@@YONS_ thank you!
@@davidliendo9677 You're welcome, also ctrl+shift+L which will select every occurrence of a selection , vscode has a lot of shortcuts that will make your life easier
@@YONS_ Yes, thanks for the advice! I also use Prietter an extension for VS code which makes typing in JS really easy
What code editor is this and how do you get the website preview on the right? Thanks
Editor: VSCode, Browser: Sizzy (need to pay for use)
Responsively App is a free alternative.
@@porte0 Thank you! I was looking for a good alternative, and just found it
7:02 LMAO!