How to setup twind-next with new "app" folder from next.js 13?

[juniorbotelho]

How to setup twind-next with new "app" folder from next.js 13?

[sastan]

Still working on an updated example.

[JacobWeisenburger]

any progress on this?

[vicary]

Is there any news? We rely heavily on the shim approach, and would love to see this happening.

[spigelli]

Any updates on this?

[lveillard]

Hello @sastan!

Could you maybe share some overall ideas so we can try to implement it ourselves and potentially open a PR? I tried different approaches with no success. If you have something in mind or protocode it would help a lot 🚀

[lveillard]

For those willing just to try it, a hideous way to do so which only works in client components is this one:

///useTwind.ts

import {useState, useEffect} from 'react';
import { defineConfig } from '@twind/core';
import presetAutoprefix from '@twind/preset-autoprefix';
import presetTailwind from '@twind/preset-tailwind';
import {setup} from '@twind/core';

export const config = defineConfig({
  presets: [presetAutoprefix(), presetTailwind()],
});

export const useTwind = () => {
  const [isLoaded, setIsLoaded] = useState(null);

  useEffect(() => {
    const asyncFn = async () => {
      setup(config);
      setIsLoaded(true);
    };
    asyncFn();
  }, []);

  return isLoaded;
};

And then in your client components:

'use client';
import { useState, useEffect, lazy } from 'react';
import { useTwind } from '../../hooks/useTwind';

export const Counter = () => {
  const [value, setValue] = useState(0);
  const isLoaded = useTwind();

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return (
    <div className='m-10'>
          <h1 className={`mt-2`}>Count: {value}</h1>
          <button onClick={() => setValue((prev) => prev + 1)}>
            Increment
          </button>
    </div>
  );
};

Btw I saw a considerable performance drop with v1 (Yes, I'm running the setup onMount so obviously it has a bigger impact in this ugly code, but I wonder what made the setup slower).

[lveillard]

Also for inspiration, this is how kuma-ui fixes it for ssr https://www.kuma-ui.com/docs/install

https://github.com/poteboy/kuma-ui/blob/main/packages/next-plugin/src/registry.tsx