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
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.
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.
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.
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!
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 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 <a href="#" class="seekto" data-time="695">11:35</a> 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.
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..
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) 👍
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!
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?
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.
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 …
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 👍
@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
@@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
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:<a href="#" class="seekto" data-time="1294">21:34</a>: 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:7<a href="#" class="seekto" data-time="432">7:12</a>: 77 │ build.onLoad({ ╵ ~~~~~~
