This is a great tutorial! I have a question, if one wants to use NextJS 12.1 with the faster SWC rust compiler they must avoid doing one thing which is creating the .babelrc file. According to the documentation this automatically signs you out of SWC benefits for babel. Is there any way we can connect tailwind + styled-components without using the .babelrc file?
Previously you needed the .babelrc for styled-components support. I think in 12.1 they've added extended support for styled-components so you should be able to use swc now. nextjs.org/blog/next-12-1
When this video was released babel was needed for style components. In Next 12.1 that doesn’t seem to be the case anymore. Check out the 12.1 release notes to see how to use the new swc compiler with styled components. Not sure about twin.macro though
@@CodeDunks I can confirm that twin.macro does not work without babel. Ben (twin.macro author) is still looking into away of properly creating a plugin for SWC. If you want the benefit of twin.macro and styled-components without .babelrc and with way simpler setup and usage, I recommend using tailwind-styled-components lib. Keep in mind however, that this one executes purely at run time, so there is a performance cost. I do not know how relevant it may be on bigger projects. What I like best about tailwind-styled-components is how simple it is to get up and running. Pretty much install and go... And supports all kind of programmatic interpolation. Unlike twin.macro.
I replayed the video 20x and followed every single steps but I get this error "ReferenceError: tw is not defined - const TailwindButton = tw.button`" . I have to import tw from t"win.macro" to make it work. Thank you!
Wow! This is cool and very helpful. Thanks for taking the time to make this video and thanks for sharing. Unfortunately, babel does not work anymore with faster Next.js pages, it has been replaced. Do you have any work around?
I believe that next.js 12 should still have backwards compatibility with babel. I haven't had a chance to play around quite as much as I wish with faster next.js pages but you could look into twind.dev/ which wouldn't really require any babel config. But not sure about styled components
@@CodeDunks thanks for taking the time to respond to my question. Really appreciated! I will look into it. Unfortunately, my MacBook has stuck as a result of OS update. I’m still battling with it😅 But I will ask any further questions on your discord channel
Sadly the new faster Next.js page generater does not work with custom babel config files and think in most of my projects, I get far more out if the faster pages building them I do get from using styled components!
Sorry for the repost. Ended up only uploading in 360p right before heading home for thanksgiving. This one should be better quality
this very helping me alot, appreciate that bro.
Great video! You just simplified my life!
This is really helpful 🙏 thanks man
Very cool! Great video
This is a great tutorial! I have a question, if one wants to use NextJS 12.1 with the faster SWC rust compiler they must avoid doing one thing which is creating the .babelrc file. According to the documentation this automatically signs you out of SWC benefits for babel. Is there any way we can connect tailwind + styled-components without using the .babelrc file?
Previously you needed the .babelrc for styled-components support. I think in 12.1 they've added extended support for styled-components so you should be able to use swc now. nextjs.org/blog/next-12-1
@@CodeDunks So do we skip the .babelrc for next 12.1 and up?
Just not use the babel plugin and instead use the next.config.js to enable it like this:
// inside nextConfig
compiler: {
styledComponents: true,
},
i'd like to ask what's the name of the theme you're using? cant seem to find it :
can you do video like this but with typescript? because some of the fuctionality like tw="" not working
Why do we need to specify "background: bg-red-500" in the tailwind styled button? Wouldn't bg-red-500 suffice ?
hai can i ask ? why when im passing props , im getting console : Warning: React does not recognize...
How about using a vite cli?
Does this setup still apply for nextjs 13?
Same question
I haven't tried setting this up with Next 13 so I can't say for certain unfortunately.
@@CodeDunks I setup my proyect yesterday with next.js 13. In the doc there a guide
after configuring package.json, I still get the 'Module not found: Can't resolve '@emotion/styled'' error
it worked after setting the debug:false in babel-plugin-twin plugin in the babelrc file
any suggestions for using the RUST compiler in nextJS 12 rather than babel?
When this video was released babel was needed for style components. In Next 12.1 that doesn’t seem to be the case anymore. Check out the 12.1 release notes to see how to use the new swc compiler with styled components. Not sure about twin.macro though
@@CodeDunks styled components works without any issues. Twin.macro doesn’t which I think uses babel too. Thank for the reply!
@@dg3152 good to know! Appreciate you looking into that
@@CodeDunks I can confirm that twin.macro does not work without babel. Ben (twin.macro author) is still looking into away of properly creating a plugin for SWC. If you want the benefit of twin.macro and styled-components without .babelrc and with way simpler setup and usage, I recommend using tailwind-styled-components lib. Keep in mind however, that this one executes purely at run time, so there is a performance cost. I do not know how relevant it may be on bigger projects. What I like best about tailwind-styled-components is how simple it is to get up and running. Pretty much install and go... And supports all kind of programmatic interpolation. Unlike twin.macro.
I replayed the video 20x and followed every single steps but I get this error "ReferenceError: tw is not defined - const TailwindButton = tw.button`" . I have to import tw from t"win.macro" to make it work. Thank you!
Wow! This is cool and very helpful. Thanks for taking the time to make this video and thanks for sharing.
Unfortunately, babel does not work anymore with faster Next.js pages, it has been replaced. Do you have any work around?
I believe that next.js 12 should still have backwards compatibility with babel. I haven't had a chance to play around quite as much as I wish with faster next.js pages but you could look into twind.dev/ which wouldn't really require any babel config. But not sure about styled components
@@CodeDunks thanks for taking the time to respond to my question. Really appreciated!
I will look into it.
Unfortunately, my MacBook has stuck as a result of OS update. I’m still battling with it😅
But I will ask any further questions on your discord channel
Sadly the new faster Next.js page generater does not work with custom babel config files and think in most of my projects, I get far more out if the faster pages building them I do get from using styled components!
Hmm that's pretty interesting, I will have to lookout for that
very goood
if I have an existing project then I can't follow if you npx cra a new project
very good thks
babel does not work T-T
Babel should have backwards compatibility with the new Next12 nextjs.org/docs/upgrading. What is not working about it if you don't mind me asking?
dejavu
2nd time to really hammer it in 😂
styled components with tailwind and this extra lib, looks terrible combined bleh