Official guides for Tailwind CSS and ShadCN UI

[rmarscher]

I forked shadcn-ui/ui and was looking at what it would take to support Waku. Currently, running the shadcn/ui cli in a Waku project falls back to manual installation:

% npx shadcn@latest init
✔ Preflight checks.
✖ Verifying framework.

We could not detect a supported framework at /path/to/project-name.
Visit https://ui.shadcn.com/docs/installation/manual to manually configure your project.
Once configured, you can use the cli to add components.

I started a PR but didn't submit it. Each framework links to documentation guides for Tailwind and ShadCN - so that is probably a pre-requisite for getting Waku included in the framework detection.

See https://github.com/shadcn-ui/ui/blob/main/packages/shadcn/src/utils/frameworks.ts

An official guide on the Tailwind site would be funny:

1. Create your project
2. Use Tailwind

😆

I think I can take a minute and try submitting a PR to Tailwind. And then submit a PR to shadcn/ui if the Tailwind PR is merged.

[rmarscher]

WIP https://github.com/tailwindlabs/tailwindcss.com/compare/main...rmarscher:tailwindcss.com:framework-guide-waku?expand=1

@dai-shi Do we have the Waku logo as an SVG? There's an option for a light and dark mode logo to appear here - https://tailwindcss.com/docs/installation/framework-guides

[rmarscher]

Also let me know if you have edits to the content I wrote at https://github.com/rmarscher/tailwindcss.com/blob/framework-guide-waku/src/app/(docs)/docs/installation/framework-guides/waku.tsx

Mainly this part:

The default template for Waku includes Tailwind as a PostCSS plugin. You can start using it immediately. The src/styles.css file imports tailwind and the default layout src/pages/_layout.tsx imports the styles.css file and uses Tailwind's utility classes for styling. You can add your own tailwind.config.js or edit postcss.config.js to customize Tailwind.

[rmarscher]

For reference, NextJS has basically the same instructions but it includes installing the dependencies from NPM, creating a postcss.config.mjs and adding the import to a globals.css. https://tailwindcss.com/docs/installation/framework-guides/nextjs

[dai-shi]

Do we have the Waku logo as an SVG?

@sandren

[dai-shi]

#1250 (reply in thread)

Also let me know if you have edits to the content I wrote at https://github.com/rmarscher/tailwindcss.com/blob/framework-guide-waku/src/app/(docs)/docs/installation/framework-guides/waku.tsx

Mainly this part:

The default template for Waku includes Tailwind as a PostCSS plugin. You can start using it immediately. The src/styles.css file imports tailwind and the default layout src/pages/_layout.tsx imports the styles.css file and uses Tailwind's utility classes for styling. You can add your own tailwind.config.js or edit postcss.config.js to customize Tailwind.

The default template might change in the future. Especially, @tylersayshi is pushing to use vite plugin instead of postcss.