Keep your Tailwind CSS code hinting with this snippet. Add it to your VS Code `settings.json`: "tailwindCSS.experimental.classRegex": [ ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] ] Sorry, I totally forgot to mention this!! Shame on me, lol.
Great tutorial, that the thing which I was waiting for 🔥🔥. Can you also try to make more components maybe which are more commonly used like input fields, modals alert, toast notification .
Input fields are coming next, for sure. After that I'm going to work my way through and then toss them all into a page where people can browse and grab the code for their apps.
Yes!! That's what I'm going to add next video to fix the last few annoyances. It... sometimes feels like overkill, but I seriously haven't created a better component without using React Aria.
Please Ethan I'm having issues publishing the package. I bundled with rollup but whenever i install it my styles don't work and i don't get any other props asides the default button one's is there something I'm not doing right?
Hey Ethan huge thanks for all these tutorials! Since you do you tutorials with App Directory it would be really useful if you could demonstrate Routing features of App router like parallel routing, intercepting routing and all that staff along with role based access to these routes if possible! Anyways, Huge thanks, and love your tutorials!
Interesting idea! I'm not a huge Figma person, I tend to like to build the designs and iterate in code. I find that when using Figma designers tend to forget all the edge cases that need to be developed.
Yes, same thing happened, but one thing we can do is to write the classes in globals.css and the just pass class names in the different variants. What do you think??
@Vikas Rai the developer of Tailwind hates the apply thing and it may get removed in some future release so we will need to go back to writing css and naming things if we go that route 🤔
@coderNerd You can add this to your .vscode/settings.json to add tailwind intellisence for cva: "tailwindCSS.experimental.classRegex": [ ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] ],
Oh my god I am SO SORRY I forgot to mention this. It's even in my notes!! You can add this to your `settings.json` in VS Code to keep Tailwind Code Hinting: "tailwindCSS.experimental.classRegex": [ ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] ]
Fantastic video mate, I had no idea that tailwind merge existed and is what was missing in my current components to make using them much easier. If possible I would like to see if you can add additional styling for when a user clicks and holds a button so that the background color changes with tailwind. Similar to how ios handles buttons, this video shows what I am trying to do: ua-cam.com/video/ydZSNUbHl_8/v-deo.html . But the problem is that when using react aria its not a fully TS supported library and I wonder how you would handle multiple refs for a button. Thanks again for your video, definitely deservers more subs.
I love @samselikoff, his video showed me React Aria in the first place. I've found the TypeScript support for React Aria to be very good (It's written in TS). I'll run through and show some of these things in the last video!
@@ethan_mick I added 'variant="secondary"' and it worked for the styling at least, do not have a "size" yet. The loading starts on all buttons at the same time, have not given it much love yet, gonna figure it out! :)
Keep your Tailwind CSS code hinting with this snippet. Add it to your VS Code `settings.json`:
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
Sorry, I totally forgot to mention this!! Shame on me, lol.
Another great video, you are bringing a lot of value, can't wait to see the channel grow and grow!
Thank you!
Thank you! Almost to 1000 subscribers which is very exciting 😊
Great tutorial, that the thing which I was waiting for 🔥🔥.
Can you also try to make more components maybe which are more commonly used like input fields, modals alert, toast notification .
Input fields are coming next, for sure. After that I'm going to work my way through and then toss them all into a page where people can browse and grab the code for their apps.
@@ethan_mick Thank you so much for this, Can't wait for your next video now 😁
Great video. For accessibility, I use react-aria and it works fantastic.
Yes!! That's what I'm going to add next video to fix the last few annoyances. It... sometimes feels like overkill, but I seriously haven't created a better component without using React Aria.
Fantastic!!!
Thank you!!
thank you, at last I got how typescript deals with forwardRef.
Glad I could help! The types get tricky around there for sure.
Please Ethan I'm having issues publishing the package. I bundled with rollup but whenever i install it my styles don't work and i don't get any other props asides the default button one's is there something I'm not doing right?
Are there specific meaning to Primary / Secondary ?
Hey Ethan huge thanks for all these tutorials!
Since you do you tutorials with App Directory it would be really useful if you could demonstrate Routing features of App router like parallel routing, intercepting routing and all that staff along with role based access to these routes if possible!
Anyways, Huge thanks, and love your tutorials!
Thanks, I think I'll end up tackling that as I build full applications and can break it down into smaller videos.
Can you make a tutorial teaching people how to set up an initial style guide for a project based of a Figma design / spec?
Interesting idea! I'm not a huge Figma person, I tend to like to build the designs and iterate in code. I find that when using Figma designers tend to forget all the edge cases that need to be developed.
hello friend, do you have a tutorial on how to create a saaS from scratch with roles in Next.js
Answered on another vid, but I'm working in this direction!
Part 2 is finally here, but doesn't this break Tailwind code hinting 😢
Yes, same thing happened, but one thing we can do is to write the classes in globals.css and the just pass class names in the different variants.
What do you think??
@Vikas Rai the developer of Tailwind hates the apply thing and it may get removed in some future release so we will need to go back to writing css and naming things if we go that route 🤔
@coderNerd You can add this to your .vscode/settings.json to add tailwind intellisence for cva:
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
],
Oh my god I am SO SORRY I forgot to mention this. It's even in my notes!! You can add this to your `settings.json` in VS Code to keep Tailwind Code Hinting:
"tailwindCSS.experimental.classRegex": [
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
]
@@codernerd7076 Really, I didn't know about it, thanks for the info.
Obviously American, but there's an accent creeping in here. Secret Brit? :)
;) That would be a surprise to me too!
Fantastic video mate, I had no idea that tailwind merge existed and is what was missing in my current components to make using them much easier. If possible I would like to see if you can add additional styling for when a user clicks and holds a button so that the background color changes with tailwind. Similar to how ios handles buttons, this video shows what I am trying to do: ua-cam.com/video/ydZSNUbHl_8/v-deo.html . But the problem is that when using react aria its not a fully TS supported library and I wonder how you would handle multiple refs for a button. Thanks again for your video, definitely deservers more subs.
I love @samselikoff, his video showed me React Aria in the first place. I've found the TypeScript support for React Aria to be very good (It's written in TS). I'll run through and show some of these things in the last video!
No. Show us the code where you use the variants
It looks like this:
Primary
Primary
Primary
setLoading(!loading)}
>
Primary
@@ethan_mick I added 'variant="secondary"' and it worked for the styling at least, do not have a "size" yet.
The loading starts on all buttons at the same time, have not given it much love yet, gonna figure it out! :)