javascriptreactjsnext.jstailwind-cssstyled-jsx

Getting styled-jsx to work with tailwindcss in NextJS

I am trying to get styled-jsx to work with tailwindcss in NextJS.

Live sample: https://codesandbox.io/s/nextjs-blog-ts-tpl-z05b4?file=/src/pages/index.tsx

In the above sample, I'm trying to get <h1>Hello World</h1> found on the index.tsx page to change colors using tailwindcss.

For example, if I set the styled-jsx to @apply text-red-400; , I expect the h1 to turn red but it does not. I do know styled-jsx is working since applying color: green; changes the h1 to green.

I tried configuring babel with styled-jsx-plugin-postcss but its not working.

Solution

  • I don't understand why but it started to work all of a sudden. I didn't even make a change. Looks like nodejs or nextjs needed to sleep it off...