CODEWITHSUNDEEP
javascriptreactjsnext.jstailwind-cssstyled-jsx
SILENT
SILENT

Reputation: 4268

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.

Upvotes: 1

Views: 2436

Answers (2)

Olavi
Olavi

Reputation: 859

I think you don't need styled-jsx for anything related to tailwindcss.

You can use the tailwind classNames directly like this and the styles will be applied:

<h1 className="text-green-400">Hello World</h1>

https://codesandbox.io/s/nextjs-blog-ts-tpl-forked-s5k6x?file=/src/pages/index.tsx:601-648

Upvotes: -2

SILENT
SILENT

Reputation: 4268

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...

Upvotes: 1

Related Questions