sladg/Keystone6-Tailwind3-integration

## Keystone6-Tailwind3-integration
import React, { FC, useState } from 'react'
import { PageContainer } from '@keystone-6/core/admin-ui/components'
import Script from 'next/script'
import tailwindConfig from '../tailwind.config.js'
import Head from 'next/head'
import { ApolloProvider } from '@apollo/client'
import client from '../utils/graphql/apollo-client'

const styles = `
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
      @apply overflow-x-hidden
  }
}
`

interface Props {
  pageTitle: string
}

// Working example on how to integrate TailwindCSS into Keystone6.
// Wrap any custom page in Keystone with <Layout></Layout> and use tailwind classes!
// Keep in mind that tailwind.config.js cannot specify plugins & required() due to stringification.
// Includes Apollo for making requests to Keystone's /api/graphql
// package.json should include "tailwindcss": "^3.0.18".

const Layout: FC<Props> = ({ pageTitle, children }) => {
  const [isTailwindLoaded, setTailwindLoaded] = useState(typeof window !== 'undefined' && !!window?.tailwind)

  return (
    <>
      <Head>
        <script src="https://cdn.tailwindcss.com?plugins=forms,aspect-ratio"></script>
        {isTailwindLoaded && <script>tailwind.config = {JSON.stringify(tailwindConfig)}</script>}
        {isTailwindLoaded && <style type="text/tailwindcss">{styles}</style>}
      </Head>
      <Script src="https://cdn.tailwindcss.com" onLoad={() => setTailwindLoaded(true)} />

      <ApolloProvider client={client}>
        <PageContainer header={pageTitle}>{isTailwindLoaded && children}</PageContainer>
      </ApolloProvider>
    </>
  )
}

export default Layout
	import React, { FC, useState } from 'react'
	import { PageContainer } from '@keystone-6/core/admin-ui/components'
	import Script from 'next/script'
	import tailwindConfig from '../tailwind.config.js'
	import Head from 'next/head'
	import { ApolloProvider } from '@apollo/client'
	import client from '../utils/graphql/apollo-client'

	const styles = `
	@tailwind base;
	@tailwind components;
	@tailwind utilities;

	@layer base {
	body {
	@apply overflow-x-hidden
	}
	}
	`

	interface Props {
	pageTitle: string
	}

	// Working example on how to integrate TailwindCSS into Keystone6.
	// Wrap any custom page in Keystone with <Layout></Layout> and use tailwind classes!
	// Keep in mind that tailwind.config.js cannot specify plugins & required() due to stringification.
	// Includes Apollo for making requests to Keystone's /api/graphql
	// package.json should include "tailwindcss": "^3.0.18".

	const Layout: FC<Props> = ({ pageTitle, children }) => {
	const [isTailwindLoaded, setTailwindLoaded] = useState(typeof window !== 'undefined' && !!window?.tailwind)

	return (
	<>
	<Head>
	<script src="https://cdn.tailwindcss.com?plugins=forms,aspect-ratio"></script>
	{isTailwindLoaded && <script>tailwind.config = {JSON.stringify(tailwindConfig)}</script>}
	{isTailwindLoaded && <style type="text/tailwindcss">{styles}</style>}
	</Head>
	<Script src="https://cdn.tailwindcss.com" onLoad={() => setTailwindLoaded(true)} />

	<ApolloProvider client={client}>
	<PageContainer header={pageTitle}>{isTailwindLoaded && children}</PageContainer>
	</ApolloProvider>
	</>
	)
	}

	export default Layout