{"id":16091074,"url":"https://github.com/palerdot/builder.io-next-tailwind-guide","last_synced_at":"2025-08-03T21:33:30.525Z","repository":{"id":241377339,"uuid":"806415894","full_name":"palerdot/builder.io-next-tailwind-guide","owner":"palerdot","description":"Builder.io + Next JS (app directory) + Tailwind configuration guilde","archived":false,"fork":false,"pushed_at":"2024-05-27T17:00:11.000Z","size":79,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T17:46:23.651Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/palerdot.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-05-27T06:51:40.000Z","updated_at":"2024-05-27T17:03:18.000Z","dependencies_parsed_at":"2024-05-28T03:27:13.618Z","dependency_job_id":"fd9cf287-33ba-441b-9af5-b46a90cd1474","html_url":"https://github.com/palerdot/builder.io-next-tailwind-guide","commit_stats":null,"previous_names":["palerdot/builder.io-next-tailwind-guide"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/palerdot/builder.io-next-tailwind-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palerdot%2Fbuilder.io-next-tailwind-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palerdot%2Fbuilder.io-next-tailwind-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palerdot%2Fbuilder.io-next-tailwind-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palerdot%2Fbuilder.io-next-tailwind-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/palerdot","download_url":"https://codeload.github.com/palerdot/builder.io-next-tailwind-guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/palerdot%2Fbuilder.io-next-tailwind-guide/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268617291,"owners_count":24279227,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-10-09T15:08:37.105Z","updated_at":"2025-08-03T21:33:30.458Z","avatar_url":"https://github.com/palerdot.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Builder.io + Next + Tailwind guide\n\nBuilder.io lets you build websites with a simple drag and drop interface. It also allows you to integrate seamlessly with existing components built by your developers. Let us explore how to create a page with a drag and drop interface powered by `Builder` and `Next.js`.\n\n\nBefore configuring a `Builder` powered `Next.js` project, you can also quickly bootstrap this setup in two simple commands.\n\n1. Configure Nextjs with tailwind\n\n```javascript\nnpx create-next@latest\n```\n\nSelect `tailwind` in the configuration screen.\n\n2. Configure `builder.io` automatically\n\n```javascript\nnpm init builder.io --latest\n```\n\nAfter you run this command, you can open the webapp at `localhost:3000` and everything will be automatically configured for you. \n\nNow let us check out how to configure a `Builder.io` project with `Next.js/tailwind`.\n\n# 1. Setup\n\n### Setup Nextjs app (`app` directory)\n\n```javascript\nnpx create-next\n```\n\nYou can bootstrap a nextjs app with your preferred configuration. You can select `tailwind` as your preferred styling library in the configuration screen.\n\n### Configuring `Tailwind` manually\n\nLet us see how to configure `Tailwind` manually in your existing nextjs project\n\n- Install tailwind dependencies\n\n```javascript\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p\n```\n\n- Configure `tailwind.config.js` with the following content\n\n```javascript\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n  content: [\n    \"./app/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./pages/**/*.{js,ts,jsx,tsx,mdx}\",\n    \"./components/**/*.{js,ts,jsx,tsx,mdx}\",\n \n    // Or if using `src` directory:\n    \"./src/**/*.{js,ts,jsx,tsx,mdx}\",\n  ],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\n- Add tailwind directives to your `globals.css`\n\n```javascript\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n\nCongrats! You have configured tailwind for your `Next` app.\n\n\n### Configure `Builder`\n\nTo get started with `builder.io`, add `Builder` dependencies.\n\n```javascript\nnpm install --save @builder.io/sdk @builder.io/react\n```\n\n### Getting `Builder` API Key\n\nYou need a valid api key to configure a `Builder` project. You can get this easily by logging in/signing up for a `builder.io` account. If you have a github account, you can easily create an account with one single click. \n\nAfter logging into your `builder.io` account, you can get your api keys by pressing `Cmd + k` and typing `api key`. Select, `Copy API` key option from the command palette.\n\nAlternatively, you can go to the account settings screen and get your API Key.\n\n### Create `Builder` component\n\n- Create a `components/builder.tsx` file and add the following contents\n\n```javascript\n// components/builder.tsx\n\"use client\";\nimport { BuilderComponent, useIsPreviewing } from \"@builder.io/react\"; \nimport { BuilderContent, builder } from '@builder.io/sdk';\nimport DefaultErrorPage from \"next/error\";\n\ninterface BuilderPageProps { \n  content?: BuilderContent;\n}\n\n// Replace with your Public API Key\nbuilder.init(YOUR_API_KEY);\n\nexport function RenderBuilderContent({ content }: BuilderPageProps) { \n  // Call the useIsPreviewing hook to determine if \n  // the page is being previewed in Builder\n  const isPreviewing = useIsPreviewing(); \n  // If `content` has a value or the page is being previewed in Builder,\n  // render the BuilderComponent with the specified content and model props.\n  if (content || isPreviewing) {\n    return \u003cBuilderComponent content={content} model=\"page\" /\u003e;\n  }\n  // If the `content` is falsy and the page is \n  // not being previewed in Builder, render the \n  // DefaultErrorPage with a 404.\n  return \u003cDefaultErrorPage statusCode={404} /\u003e; \n}\n```\n\n## Configure App Page\n\n- Create a `app/[...page]/page.tsx` file with following contents\n\n```javascript\n// Example file structure, app/[...page]/page.tsx\n// You could alternatively use src/app/[...page]/page.tsx\nimport { builder } from \"@builder.io/sdk\";\nimport { RenderBuilderContent } from \"../../components/builder\";\n\n// Replace with your Public API Key\nbuilder.init(YOUR_API_KEY);\n\ninterface PageProps {\n  params: {\n    page: string[];\n  };\n}\n\nexport default async function Page(props: PageProps) {\n  const content = await builder\n    // Get the page content from Builder with the specified options\n    .get(\"page\", {\n      userAttributes: {\n        // Use the page path specified in the URL to fetch the content\n        urlPath: \"/\" + (props?.params?.page?.join(\"/\") || \"\"),\n      },\n      // Set prerender to false to return JSON instead of HTML\n      prerender: false,\n    })\n    // Convert the result to a promise\n    .toPromise();\n\n  return (\n    \u003c\u003e\n      {/* Render the Builder page */}\n      \u003cRenderBuilderContent content={content} /\u003e\n    \u003c/\u003e\n  );\n}\n```\n\n\n### Configure model preview URL\n\nMost common way to use `Builder` with your existing `nextjs` app is to configure a page model. This enables `Builder` to open your app in the browser visual editor.\n\nTo enable preview URL\n\n- Go to the [Models](https://builder.io/models) section and choose the page model.\n- Set the preview URL to `http://localhost:3000`. Make sure to configure your port correctly if your nextjs app is using a different port.\n\n# 2. Creating Builder Pages\n\nMost powerful feature of `Builder` is an intuitive drag-and-drop page builder that integrates seamlessly with your existing codebase. You can use this drag-and-drop page builder without any coding knowledge.\n\nTo create `Builder` Pages\n- Go to [Content](https://builder.io/content) and click `+New`. \n- Create a new page by giving an appropriate title, e.g `Contact`. `Builder` automatically generates an URL (`/contact`) for you.\n- In the newly created page, drag and drop any elements from the visual editor. For example, you can drag a `Contact us` text block.\n- Click `Publish` to publish your changes. Now visit the `http://localhost:3000/contact` page. You have created a `Contact us` page without any coding.\n\nTo update `Builder` pages, you can use the `builder.io` visual editor. Changes will be published instantly without any code changes. The best part about `Builder` is your drag and drop pages will seamlessly integrate with custom components created by your developers. \n\n# 3. Additional Resources\n\n- For a more detailed guide, visit https://www.builder.io/c/docs/integrating-builder-pages. \n- For an example repo, checkout https://github.com/palerdot/builder.io-next-tailwind-guide.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalerdot%2Fbuilder.io-next-tailwind-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpalerdot%2Fbuilder.io-next-tailwind-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpalerdot%2Fbuilder.io-next-tailwind-guide/lists"}