Add -withTailwind option to Nextjs recipe

[welle-dev-duck]

I found a way of easily integrating TailwindCss with Puck, where in the editor we have full control over the styles, missing all the headaches cause by class purging.

https://medium.com/@welle-dev-duck/pucks-nextjs-recipe-with-the-full-power-of-tailwindcss-be615bdfe786

I think this could be added to the recipe.
Only modifications would be probably:

package.json:
- tailwindcss
- @tailwindcss/postcss
- postcss

create postcss.config.mjs in the root

const config = {
    plugins: {
        '@tailwindcss/postcss': {},
    },
};
export default config;

in styles.css
@import "tailwindcss";

Overriding Puck iframe in app/puck/[…puckPath]/client.tsx

<Puck
            config={config}
            data={data}
            overrides={{
                iframe: ({children, document}) => {
                    // eslint-disable-next-line react-hooks/rules-of-hooks
                    useEffect(() => {
                        // Defer until next render
                        setTimeout(() => {
                            if (document) {
                                const tag = document.createElement('script');
                                tag.src =
                                    'https://unpkg.com/@tailwindcss/browser@4';
                                tag.async = true;
                                document.head.appendChild(tag);
                            }
                        }, 0);
                    }, [document]);

                    return <>{children}</>;
                },
            }}
            iframe={{enabled: true}}
            onPublish={async (data) => {
                await fetch('/puck/api', {
                    method: 'post',
                    body: JSON.stringify({data, path}),
                });
            }}
        />

Optionally adding a new field to the base HeadingBlock defined in puck config

components: {
        HeadingBlock: {
            fields: {
                title: {type: 'text'},
                twClasses: {type: 'text'}, // Add simple text field to play with Tailind
            },
            defaultProps: {
                title: 'Heading',
                twClasses: '',
            },
            render: ({title, twClasses}) => (
                <div className={twClasses}>
                    <h1>{title}</h1>
                </div>
            ),
        },

[chrisvxd]

Let's discuss here: #860