Created
February 7, 2022 17:46
-
-
Save sladg/0b55d5b1535066af5ae06019c5df59f1 to your computer and use it in GitHub Desktop.
Simple wrapper for custom Keystone6 routes to provide Tailwind styling for components. Supports core plugins and custom configuration (as long as not relying on additional plugins beside tailwind's core).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment