{"id":20196948,"url":"https://github.com/itsjonq/next-twind-tailwind","last_synced_at":"2026-05-12T19:45:42.976Z","repository":{"id":39867105,"uuid":"492100752","full_name":"ItsJonQ/next-twind-tailwind","owner":"ItsJonQ","description":"Getting Tailwind and Twind to work with Next.js (v10)","archived":false,"fork":false,"pushed_at":"2022-05-24T04:57:19.000Z","size":352,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-03T08:15:25.776Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"next-twind-tailwind.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ItsJonQ.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-05-14T03:20:45.000Z","updated_at":"2022-10-02T17:05:10.000Z","dependencies_parsed_at":"2022-08-29T10:32:11.371Z","dependency_job_id":null,"html_url":"https://github.com/ItsJonQ/next-twind-tailwind","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ItsJonQ/next-twind-tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fnext-twind-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fnext-twind-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fnext-twind-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fnext-twind-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ItsJonQ","download_url":"https://codeload.github.com/ItsJonQ/next-twind-tailwind/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ItsJonQ%2Fnext-twind-tailwind/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32954822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-12T09:19:52.626Z","status":"ssl_error","status_checked_at":"2026-05-12T09:17:33.438Z","response_time":102,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-14T04:26:42.840Z","updated_at":"2026-05-12T19:45:42.957Z","avatar_url":"https://github.com/ItsJonQ.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Twind x Next.js\n\nGetting [Twind](https://twind.dev/) to work with [Next.js](https://nextjs.org/) (v10).\n\n## Goal\n\n- Ensure server-side rendering is working.\n- Ensuring there's not FOUC (flash of unstyled content).\n\n## Versions\n\n- [Next.js](https://nextjs.org/), `v10.0.0`\n- [Twind](https://twind.dev/), `v0.16.16`\n\n## Setup\n\n### Setting up Twind\n\nEnsure your project has the correct Twind dependencies:\n\n```sh\nnpm install -D @twind/next twind\n```\n\nCreate a `twind.config.js` file at the root of your project, and add the following:\n\n```js\nexport default {\n  theme: {\n    extend: {\n      screens: {\n        standalone: { raw: '(display-mode:standalone)' },\n      },\n    },\n  },\n};\n```\n\n### Check if Twind is working\n\nAdd some very simple Twind styles to a test page.\n\n```jsx\n// pages/example.js\nimport Head from 'next/head';\nimport Image from 'next/image';\nimport { tw } from 'twind';\n\nexport default function Page() {\n  return (\n    \u003cmain\n      className={tw`h-screen bg-purple-400 flex items-center justify-center`}\n    \u003e\n      \u003ch1\n        className={tw`font-bold text(center 5xl white sm:gray-800 md:pink-700)`}\n      \u003e\n        This is Twind!\n      \u003c/h1\u003e\n    \u003c/main\u003e\n  );\n}\n```\n\nFire up your Next.js app. These Twind styles should load.\n\nYou should see a lavendar purple page with large pink text saying \"This is Twind!\".\n\nIf this isn't working, you'll need to tinker to get the basics of Twind to work with your Next.js project.\n\nIf Twind is working, then move onto the next step.\n\n### Server-side rendering Twind\n\nAt this point in time, you should have:\n\n- A working Next.js app\n- Tailwind styles loaded and working\n- Twind working with Tailwind and Next.js\n\nHowever, you may notice that you're experience a flash of unstyled content (FOUC) for production builds.\n\nThis is because Twind isn't being server-side rendered yet. We're going to do that now!\n\nPreviously, we've installed the necessary dependency to get this working, `@twind/next`.\n\n```sh\nnpm install -D @twind/next twind\n```\n\nOn [Twind's Next.js docs](https://github.com/tw-in-js/use-twind-with/tree/main/packages/next), they include instructions on setting up Twind **with a custom Document component**.\n\nThis is what you'll have to do.\n\nOpen (or create) a `pages/_document.js` file in your Next.js project.\n\nAdd the following to ensure the exported `Document` (class) is wrapped with `withTwindDocument` and `twindConfig`.\n\n```jsx\n// pages/_document.js\nimport Document from 'next/document';\nimport withTwindDocument from '@twind/next/document';\nimport twindConfig from '../twind.config';\n\nclass MyDocument extends Document {\n  static async getInitialProps(ctx) {\n    const initialProps = await Document.getInitialProps(ctx);\n    return { ...initialProps };\n  }\n}\n\nexport default withTwindDocument(twindConfig, MyDocument);\n```\n\nTwind's instructions are **missing** the `Document` import. Add this part in if your `_document.js` file doesn't have it.\n\n```jsx\nimport Document from 'next/document';\n```\n\n### Check if Twind SSR is working\n\nMoment of truth...\n\nYou can actually do this without building Next.js for production and serving it.\n\nIn local development (running `npm run dev`), when you view the source code, you should be able to see the (giant) `style` tag with the various Tailwind styles inside.\n\n```\n\u003cstyle id=\"__tw-v3yfpw\"\u003ebutton,input,optgroup,select,textarea{font-family:inherit;font-size:100%;margin:0...\n```\n\nIf you can see it when viewing source, that means that **SSR is working**. The styles from Twind is extracting correctly and being injected into the document.\n\n## Questions\n\n### How does this work?\n\nSimply put, it's looking at the HTML to figure out what classes the page needs, then injecting those classes.\n\nAll of this happens in `pages/_document.js`.\n\nCSS(-in-JS) and SSR work by examining the HTML that's being rendered on the page. They then cross match details (like classes) to pluck out the necessary styles needed to render those styles.\n\nAfter getting all the classes, they'll \"inject\" all of those classes in a `style` tag along with the page's original HTML (`string`).\n\nThat's it! SSR CSS in a nutshell.\n\nYou can see some of these mechanics in Twind's [Next.js integration](https://github.com/tw-in-js/use-twind-with/blob/main/packages/next/document.ts) as well as their [shim file](https://github.com/tw-in-js/use-twind-with/blob/main/packages/next/shim/document.ts).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fnext-twind-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitsjonq%2Fnext-twind-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitsjonq%2Fnext-twind-tailwind/lists"}