Robin Malfait
39c5bd3230
* add `@headlessui/tailwindcss` plugin * expose `data-headlessui-state="..."` data attribute All components that expose boolean props in their render prop / v-slot will receive a `data-headlessui-state="..."` attribute. If it exposes boolean values but all are false, then there will be an empty `data-headlessui-state=""`. If the current component is rendering a `Fragment` then we don't expose those attributes. * use tailwindcss in `playground-react` and `playground-vue` We were using the CDN, but now that we have the `@headlessui/tailwindcss` plugin, it's a bit easier to configure it natively and import the plugin. * ensure to build the `@headlessui/tailwindcss` package before starting the playground * refactor `listbox` example to use the @headlessui/tailwindcss plugin * update changelog * bump Tailwind CSS to latest insiders version * correctly generate types * type `tailwind.config.js` files for playgrounds * add todo for when `:has()` is available
32 lines
760 B
TypeScript
32 lines
760 B
TypeScript
import { Html, Head, Main, NextScript } from 'next/document'
|
|
|
|
export default function Document() {
|
|
return (
|
|
<Html>
|
|
<Head>
|
|
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
|
|
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="https://headlessui.dev/favicon-32x32.png"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="16x16"
|
|
href="https://headlessui.dev/favicon-16x16.png"
|
|
/>
|
|
</Head>
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</Html>
|
|
)
|
|
}
|