The level of appreciation I have for creators that make this type of content where they show the whole process, from start to finish like when things break, so as not to freak out about it. And then how to actually fix it is so so so appreciated man. Keep it real 💪
Thank you! I do freak out internally when stuff doesn't go as it should while streaming/recording - but you're right, this is where a lot of the value is!
@@simonswiss relatable content can be hard to find online (as a whole) so it’s really nice to see the pivots and the “Whoooops… okay… how2fix this” type thing. Always give props to people that have the confidence to shows/demonstrate it. (Also speaks volumes for the audience you have, as it likely means you’ve got a positive community here)
I've personally used shadcn/ui for my website, it's awesome! Your tutorial is cherry on top, I'll make the components more reusable with this tutorial. Thank you so much Simon✨
I missed your videos my friend!! Very useful content for my turborepo! It would be nice if could teach us an approach for setting up a monorepo with shadcn, custom twcss plugins, ui packages and applications... all sharing same ui resources!!
Not sure if you're on Twitter, but check this tweet out. I played with the idea, and it worked brilliantly :) twitter.com/simonswiss/status/1669489669795614721
@@simonswiss thanks Simon I meant having an organisation color pallet and change the shadcn components to follow that color pallet and be able to apply the organisation’s color palette with tailwindcss. Thank you
Excellent video, as always! It's interesting, especially when working with a mono-repo. Maybe I should create an ultimate Nx plugin to generate this on my apps :D
Yeah - the preset in question could (should) be a package in your monorepo, so you can import it in multiple apps ✨ Haven't used Nx myself, but it works great with Turborepo or even just npm workspaces 👍
Nice video, thx for the tips. I didn't get the hsl colors shadcn/ui uses. I never coded a design putting colors like: "oh this is pinky, this is redish, this is greenish". No, the designers always want you to put the specific hex.
Did you figure out the nested plugin section issue thing? I'm supercurious about the root cause and possible "proper" fix! Thanks for all the great vidz!
Nice video, Simon! What is the reason for creating a plugin instead of doing everything inside the preset, considering that the preset can also be reused across projects?
Do you mean defining the plugin inside the preset directly? Still need the `addBase` helper from the Plugin API to generate the CSS variable declarations..
Hey nice video. I personally don't enjoy writing CSS in JS Objects format. Wish there was a CSX like JSX that acted and felt like CSS, same syntax. That's why I don't go creating TW Plugins.
Would you create different presets for different themes? but i'm thinking you would need to create a separate plugin for each theme then which doesn't seem very DRY and ideal to me....... in short goal would be to have different presets for different themes and that is all you would need to figure in the consuming application
Nope - I would have the theme plugin accept a theme object with multiple keys (each supporting light and dark). And then create theme scopes to redefine the CSS variables based on the theme. One plugin for all themes. Checkout protailwind.com/workshops/multi-theme-strategy - this is what we do in that workshop (without the dark/light mode) 👍
Thanks a lot. Got much understanding on shadcn and theming also some tailwind stuff. Could you make a ecommerce ui using shadcn? With custom theme/modifications to shadcn😊
I like shadcn and your video. I create a new laravel project and install tailwind css and create components using shadcn and base color for "slate". And I changed theme primary color to desired custom HSL value from "coolors" color palette website in css variable. And primary color changed for button. But primary color not working for button hover effect. Please someone help me.
You can use the cn() function provided by shadcn/ui - it uses Tailwind Merge internally :) github.com/shadcn-ui/ui/blob/main/templates/next-template/lib/utils.ts#L4-L6
For some reason at 11:35 I'm getting an error in VSCode under `'tailwindcss-animate'` in the updated import line. For some reason it's not picking up from my node_modules. Any guesses? Appreciate any help. 🙏
Hmmmm I remember seeing something like that once too - and I think I was able to resolve it by adding a .d.ts file with "declare module". The error/warning should tell you about it.
I don’t why when I add shadcn in my Next js project, tailwind doesn’t work anymore … Do you know the things to do for handle this sue please? Thank you for your content …
I feel like Tailwind Variants builds on CVA and adds a bit extra functionality? CVA definitely gets a shoutout in the README. I don't thinks a "vs" video will happen - but I might do a video for each library!
You write CSS-in-JS in a plugin, but what gets spat out is "regular" CSS. It's all just CSS and should work no problem on server (and client) components 👍
When I modify tailwind config and thete is some error, next.js crashes. Each time I need to restart server. How do I make it work without having to restart next.js server?
@@simonswiss Are you using it to specify another font family or something else? I've seen there is a var(--font ), but I haven't seen any var in the css file
@Simonswissdev pour un niveau pour un niveau intermédiaire comme moi, j'ai pas trop compris l'utilisation même si tu l'a expliqué oralement. J'ai essayé récemment de faire un truc similaire avec Shadcn et Daisy UI dans le même projet et la tu me donne l'étape d'après, juste le fait que ca soit au même endroit
Thank you, this is amazing! Any thoughts on how this encapsulated plugin might be used in a Storybook setup? I'm especially wondering about the Storybook preview file that needs the css file imported in? It would now be in the plugin.
Was anyone able to get this working with Remix? This doesn't seem to work in the remix root.tsx file: import stylesheet from '@/styles/globals.css' export const links: LinksFunction = () => [ { rel: "stylesheet", href: stylesheet }, ]; Will result in the following error: ✘ [ERROR] Build failed with 1 error: error: Cannot find module '@/styles/shadcn-presets' Require stack: - /frontend/tailwind.config.ts [plugin css-file] app/root.tsx:21:34: 21 │ import stylesheet from '@/styles/globals.css'; ╵ ~~~~~~~~~~~~~~~~~~~~~~~ This error came from the "onLoad" callback registered here: ../../node_modules/.pnpm/@remix-run+dev@2.6.0_@remix-run+serve@2.6.0_typescript@5.3.3/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:77:12: 77 │ build.onLoad({ ╵ ~~~~~~
I appreciate the dark mode ☺
Heh, I know you're not alone. The TH-cam comments told me wassup with light theme 🤣
Just missing the transition slides using dark as well to avoid these flashes in the middle of the night. 😅
Thanks for this master class on improving the shadcn/ui config. I truly apreciate your content, your effort and your work 💪
Thank you!
I missed you dude. Thanks to your tutorials on official Tailwind channel, I'm now really confident in Tailwind
Awwww, that's awesome to hear!
The level of appreciation I have for creators that make this type of content where they show the whole process, from start to finish like when things break, so as not to freak out about it. And then how to actually fix it is so so so appreciated man.
Keep it real 💪
Thank you! I do freak out internally when stuff doesn't go as it should while streaming/recording - but you're right, this is where a lot of the value is!
@@simonswiss relatable content can be hard to find online (as a whole) so it’s really nice to see the pivots and the “Whoooops… okay… how2fix this” type thing. Always give props to people that have the confidence to shows/demonstrate it.
(Also speaks volumes for the audience you have, as it likely means you’ve got a positive community here)
The God of Tailwind 🤩 I've watched most of your tutorials. Although they are professional but I can understand every bit of them
That's really nice to hear - thank you! 😍
I like that you call it being “nerdsniped” when you get hit doing something else nerdy to procrastinate the thing you were intending to do.
I've personally used shadcn/ui for my website, it's awesome! Your tutorial is cherry on top, I'll make the components more reusable with this tutorial. Thank you so much Simon✨
Haha that's amazing to hear! Glad it's useful. I am yet to use shadcn/ui in a project, but I already see the value and love it 🎉
17:24 How to add @apply in TailwindCSS Config (workaround)
Yep that's a good trick!
This is pure Gold! You should definitely have more views and subscribers.
Wow, thank you! I need to be more consistent with my video output as well 😅
Very useful information presented in an engaging manner, you’re killing it dude
Thank you so much - such a nice thing to say!
Cool! This will be my new Tailwind Boilerplate :)
Thank you so much for this video. Your tailwind course was awesome and now this is cherry on top.
Thank you for saying this! And thank you for your support of my course! Hoping to continue adding cherries on top 🙏
Right on time, it’s almost like you custom made this video4Me! Thankyou bro❤
Haha glad I could read your mind!
I missed your videos my friend!! Very useful content for my turborepo! It would be nice if could teach us an approach for setting up a monorepo with shadcn, custom twcss plugins, ui packages and applications... all sharing same ui resources!!
That is basically the topic of my next workshop! 👀
Not sure if you're on Twitter, but check this tweet out. I played with the idea, and it worked brilliantly :)
twitter.com/simonswiss/status/1669489669795614721
it's awesome! Thank you so much Simon 👍
Glad you like it! 🤗
An excellent video, as always! I see Simon, I know it's a "thumbs up!"
Ayyyye, thank you so much! 🙏
Total Genius!!! Thanks for this super video!!! 💌
Was hoping you show how to change the color pallet, is that only in your paid course ? 😊
Thank you - glad you enjoyed it!
As in, having multiple themes with different colors?
@@simonswiss thanks Simon I meant having an organisation color pallet and change the shadcn components to follow that color pallet and be able to apply the organisation’s color palette with tailwindcss. Thank you
great video and great channel
Thank you! 🙏
Very useful in making it reusable.
It sure is - and also opens up so many possibilities with JavaScript!
Thanks for the video, really like your explanation
Awesome, thanks for watching! 🙏
Excellent video, as always!
It's interesting, especially when working with a mono-repo.
Maybe I should create an ultimate Nx plugin to generate this on my apps :D
Yeah - the preset in question could (should) be a package in your monorepo, so you can import it in multiple apps ✨
Haven't used Nx myself, but it works great with Turborepo or even just npm workspaces 👍
Nice video, thx for the tips.
I didn't get the hsl colors shadcn/ui uses. I never coded a design putting colors like: "oh this is pinky, this is redish, this is greenish". No, the designers always want you to put the specific hex.
this is beyond amazing
Glad you found it helpful!
Did you figure out the nested plugin section issue thing? I'm supercurious about the root cause and possible "proper" fix! Thanks for all the great vidz!
French accent just makes it better
Zis is ze best comment in ze world
@@simonswiss I'm sorry. I don't know what I am saying
Nice video, Simon! What is the reason for creating a plugin instead of doing everything inside the preset, considering that the preset can also be reused across projects?
Do you mean defining the plugin inside the preset directly? Still need the `addBase` helper from the Plugin API to generate the CSS variable declarations..
Very helpful. Thanks Simon. Sidebar: what browser are you using?
Thank you! I am using the ARC browser - it's really good!
I love this so much. I have been struggling in how to do something similar to this 🙏🏼 thank you
Nice to hear it helps! ✨
as always. epicccc
✨
Superbe vidéo 👍
Merci beaucoup - superbe commentaire 🙏
Hi simon,thank for vedio
You're very welcome!
really cool video :)
Glad you liked it!
Hey nice video. I personally don't enjoy writing CSS in JS Objects format. Wish there was a CSX like JSX that acted and felt like CSS, same syntax. That's why I don't go creating TW Plugins.
You can use chrome's color picker to get hsl values of whatever color you want. Takes out the guesswork.
Yep good point. Guessing game is fun though 😅
You can also temporarily make it a valid HSL value so the editor gives you a color picker and then turn it back into numbers 😉
@@Stoney_Eagle very clever!
Love your vids!
Thank you!
Would you create different presets for different themes? but i'm thinking you would need to create a separate plugin for each theme then which doesn't seem very DRY and ideal to me....... in short goal would be to have different presets for different themes and that is all you would need to figure in the consuming application
Nope - I would have the theme plugin accept a theme object with multiple keys (each supporting light and dark). And then create theme scopes to redefine the CSS variables based on the theme. One plugin for all themes. Checkout protailwind.com/workshops/multi-theme-strategy - this is what we do in that workshop (without the dark/light mode) 👍
wow, this is very clean. thank you so much Simon.
You're very welcome!
love your vids. Are you able to do a video on your recording and editing process?
That's a good idea! I write a bit about it on betterdevscreencasts.com - but making a video is a good idea!
ah, amazing!
Yeah it's pretty cool ✨
Thanks a lot. Got much understanding on shadcn and theming also some tailwind stuff.
Could you make a ecommerce ui using shadcn? With custom theme/modifications to shadcn😊
You are really good 🎉❤
Thank you! ✨
Can you link to the blog you showed in the beginning. Thank you!
What blog post do you mean? I show the shadcn/ui docs website (introduction page) at the beginning. Or do you mean something else?
I like shadcn and your video.
I create a new laravel project and install tailwind css and create components using shadcn and base color for "slate".
And I changed theme primary color to desired custom HSL value from "coolors" color palette website in css variable. And primary color changed for button. But primary color not working for button hover effect.
Please someone help me.
Do you have some code to show? Link to a repo?
Good video✨✨✨
would you tail me which theme do you using in vscode and font??
I'm using Dank Mono as a font, and Nigh Owl as a theme 👍
Awesome stuff, Can you please make the video for cva
I am still in the process of moving into my new house and setting up the home office, but I shoudl do this video once I am set up!
Can you please teach us how to fix positioning the navigation menu drop-down(shadcn).
How we add css className next to the buttonVariants({ variant: "outline"})? it's on 9:40
You can use the cn() function provided by shadcn/ui - it uses Tailwind Merge internally :)
github.com/shadcn-ui/ui/blob/main/templates/next-template/lib/utils.ts#L4-L6
I liked the font that you used in your code editor. Can anyone share the font name please.
Dank Mono
@@jereMIAHjoSEPH Yep, correct - Dank Mono it is!
thank u, very usefull
You are welcome :)
Hello, i from bangladesh i love it your video
Hello, friend! 👋 I am glad you enjoy my videos! ✨
Can i use this as boilterplate to my projexcts
For some reason at 11:35 I'm getting an error in VSCode under `'tailwindcss-animate'` in the updated import line. For some reason it's not picking up from my node_modules. Any guesses? Appreciate any help. 🙏
Hmmmm I remember seeing something like that once too - and I think I was able to resolve it by adding a .d.ts file with "declare module".
The error/warning should tell you about it.
add "declare module 'tailwindcss-animate';" to global.d.ts in root folder
Yes, that seems to solve this issue (and it's what the error modal suggests) @@whyrulikedis8248
Awesome video! Do you by chance have the final code uploaded anywhere?
I don't right now, but I'll put this in a public repo and share the link!
I don’t why when I add shadcn in my Next js project, tailwind doesn’t work anymore … Do you know the things to do for handle this sue please? Thank you for your content …
Perhaps a wrong setting in your content array in the config file? Got a repo to have a look at?
Can we expect a video on cva vs tailwind variants
I feel like Tailwind Variants builds on CVA and adds a bit extra functionality? CVA definitely gets a shoutout in the README. I don't thinks a "vs" video will happen - but I might do a video for each library!
You are awesome 😎
Gems.
great explaination, what about react server components, css in js is a nightmare in nextjs 13+.
You write CSS-in-JS in a plugin, but what gets spat out is "regular" CSS. It's all just CSS and should work no problem on server (and client) components 👍
didn't work for me. gives an error message "Error: Cannot find module"
At what point?
what font are you using in your vs code?
It's called Dank Mono!
i made one that merges a daiyui theme into the variables
Haha nice one, that's awesome!
❤
❤❤❤
pra mim não funcionou 🤔 ai eu fiz isso:
addBase({
'*': {
'border-color': 'hsla(var(--border))',
},
body: {
background: 'hsla(var(--background))',
color: 'hsla(var(--foreground))',
// '@apply bg-background text-foreground':
// {},
},
})
Impossible to use tailwind in visual studio code as installation is a nightmare. New install video step by step request....
What part is a nightmare? What can't you use? Tailwind intellisense not working?
When I modify tailwind config and thete is some error, next.js crashes. Each time I need to restart server. How do I make it work without having to restart next.js server?
Hmmm I don't think you can! I had to restart my server in the video too - I just hid that to not make the video any longer than it is 😅
@@simonswiss oh I see. Thanks.
What font u using?
Dank Mono 🤙
I got curious about the "fontFamily" that you're setting in this file.
Do you have a specific question about it?
@@simonswiss Are you using it to specify another font family or something else? I've seen there is a var(--font ), but I haven't seen any var in the css file
which font you use in your ide please tell me I want that it is my humble request to you sir.
Dank Mono!
@@simonswiss thank you very much sir.
where to get this plugin
Waoooooo Waoooo and Waooooooo
Wooooooohaaaaaa
I created a plugin called inception and imported it into itself. I think I created a black hole.
🤣🤣🤣
merci
De rien! 🤙
@Simonswissdev pour un niveau pour un niveau intermédiaire comme moi, j'ai pas trop compris l'utilisation même si tu l'a expliqué oralement. J'ai essayé récemment de faire un truc similaire avec Shadcn et Daisy UI dans le même projet et la tu me donne l'étape d'après, juste le fait que ca soit au même endroit
Is it hard to rent a house and become resident of Bangladesh?
I wouldn't know!
so that's only for react, not pure.
Yeah, that's not going to work in any environment where Tailwind CSS works, unfortunately.
why have I not subbed until now???
I am glad you did now! ❤️
Simon you have such a great content and yet very few subsribers. Why is that?
Because I only "recently" started doing stuff on my channel - I poured my heart on the Tailwind Labs channel before that!
@@simonswiss gotcha. Best of luck with your channel and keep it up
@@alexpanteli3651 Thank you - it's been fun creatring videos and engaging with the comments ✨
"calm down copilot" 😅
🤣 I say this so often 🤣
HSL ftw
OKLCH will probably be the way, takes the best bits of HSL but into the wider color spectrum 🔥
Alway keep spelling it as shad CDN 😂😂
I was convinced it was that and said it "shad CDN" for a whole week!
Thank you, this is amazing! Any thoughts on how this encapsulated plugin might be used in a Storybook setup? I'm especially wondering about the Storybook preview file that needs the css file imported in? It would now be in the plugin.
The plugin injects the styles in the CSS file, so... I _think_ that importing that CSS file in the Storybook preview file should just work 👍
Was anyone able to get this working with Remix? This doesn't seem to work in the remix root.tsx file:
import stylesheet from '@/styles/globals.css'
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: stylesheet },
];
Will result in the following error:
✘ [ERROR] Build failed with 1 error:
error: Cannot find module '@/styles/shadcn-presets'
Require stack:
- /frontend/tailwind.config.ts [plugin css-file]
app/root.tsx:21:34:
21 │ import stylesheet from '@/styles/globals.css';
╵ ~~~~~~~~~~~~~~~~~~~~~~~
This error came from the "onLoad" callback registered here:
../../node_modules/.pnpm/@remix-run+dev@2.6.0_@remix-run+serve@2.6.0_typescript@5.3.3/node_modules/@remix-run/dev/dist/compiler/plugins/cssImports.js:77:12:
77 │ build.onLoad({
╵ ~~~~~~