Setting up Tailwind with Styled Components using Twin.macro in Next.js

I really enjoyed setting this library up because you get the best of both worlds. The flexibility in using tailwind classes as well as the extraction of styled-components to keep your code clean without long html tags.



Timestamps:
0:00 intro
3:00 project start
5:50 install styled components
9:00 install twin macro
15:30 styled api

[CodeDunks]

Sorry for the repost. Ended up only uploading in 360p right before heading home for thanksgiving. This one should be better quality

[eddyagossou]

Great video! You just simplified my life!

[iqbalm]

this very helping me alot, appreciate that bro.

[alquinex]

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?

[baxterks]

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?

[daisyclair]

i'd like to ask what's the name of the theme you're using? cant seem to find it :<

[joshuagalit]

can you do video like this but with typescript? because some of the fuctionality like tw="" not working

[vnybanez]

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!

[coneymoney]

Why do we need to specify "background: bg-red-500" in the tailwind styled button? Wouldn't bg-red-500 suffice ?

[dg]

any suggestions for using the RUST compiler in nextJS 12 rather than babel?

[pylegxb]

hai can i ask ? why when im passing props, im getting console : Warning: React does not recognize...

[codernerd]

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!

[SEFcool]

Does this setup still apply for nextjs 13?

[badguardian]

if I have an existing project then I can't follow if you npx cra a new project

[silesianguy]

styled components with tailwind and this extra lib, looks terrible combined bleh