Add Tailwind option to Nextjs recipe

[chrisvxd]

Add a Tailwind option to the Next.js recipe

Proposals

Proposal 1

Add a --withTailwind flag to the generator

Proposal 2

Prompt the user during install for CSS library

Select a CSS framework:
- [ ] None (default)
- [ ] Tailwind

Proposal 3

Don't add this option, but just wrap the Tailwind functionality as a plugin (similar to emotion plugin)

Considerations

• Should Tailwind be integrated directly, or as a plugin
• Consider how to avoid forking recipes to minimise maintenance overhead
• What would an appropriate prompt be if the user wanted to install another component library?
• The solution provided by @welle-dev-duck works well for scenarios where the user needs to dynamically apply classes, but is it appropriate for cases where the user has fixed classes? What about if the user has a custom Tailwind theme?

[chrisvxd]

Discussed in #859

^{Originally posted by welle-dev-duck January 29, 2025}

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>
            ),
        },

[welle-dev-duck]

but is it appropriate for cases where the user has fixed classes? What about if the user has a custom Tailwind theme?

That should not matter since both the custom tailwind modifications and the whole library from the CDN is present in the editor.

Tailwind V4 is backwards compatible so it can be configured 2 ways:

• in tailwind config file
• directly in styles.css

This way when somebody wants to see the generated pages, Tailwind (the downloaded package) will look trough the generated html, generate classes based on it, add every customization it finds in the config, and then ships it minified to the client.