Nextjs13 HMR

[Dawid Wesołowski]

Hey,
When I change base styles or variant styles I need to refresh the page to see changes.

Nextjs: ^13.0.5
Tailwindscss: ^3.2.4

'use client'
import { w } from 'windstitch';

const Button = w.button('bg-red-500', {
  variants: {
    color: {
      red: 'text-red-500',
      blue: 'text-blue-500',
    },
    size: {
      small: 'text-sm',
      large: 'text-lg',
    },
  },
  defaultVariants: {
    size: 'small',
  },
});

export default Button

[Dawid Wesołowski]

Issue with Nextjs

[Tom Schönmann]

Do you have a reproducible repo? I'm even using Turbopack for the transpilation, but it works fine w/ server + client components.

next: 13.1.4
tailwindcss: ^3.2.4
windstitch: "0.3.0"

[Tom Schönmann]

Ok, can also reproduce it now. Looks like it's realted to a React-issue, Next-team is tracking it: vercel/next.js#43396 (comment)

[Andriy Komm]

You can circumvent the issue by integrating as postcss plugin now. That, for me, solves the issue.

https://beta.nextjs.org/docs/styling/tailwind-css